반응형
Angular.js : 템플릿에서 ng-href를 사용하는 방법
템플릿을 포함한 1개의 index.html로 심플한 SPA를 작성하려고 합니다.
ng-href 디렉티브에 문제가 있습니다.
<a ng-href="#/myPage">myPage</a>
index.model에서는 동작하지만 템플릿에서는 동작하지 않습니다.링크는 클릭할 수 없습니다만, href는 아직 동작합니다.
<a href="#/myPage">myPage</a>
내 앱:
index.syslog:
...
<body ng-app="myApp">
<a ng-href="#/myPage" target="_self">link</a> <!-- work ! -->
<div class="container" ng-view=""></div>
</body>
...
app.filename:
'use strict';
angular.module('myApp',
[ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ]).config(
function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'views/main.tpl.html',
controller : 'MainCtrl'
})
.when('/myPage', {
templateUrl : 'views/page.tpl.html',
controller : 'MainCtrl'
})
.otherwise({
redirectTo : '/'
});
});
controller.controller.controllers
'use strict';
myApp.controller('MainCtrl', function() {
this.myColor = 'blue';
});
page.tpl.displays (페이지.tpl.display)
<div>
<a ng-href="#/myPage" target="_self">link</a> <!-- Dont work -->
<a ng-href="#/myPage" target="_self">link</a> <!-- Dont work -->
<a ng-href="#/myPage{{}}">link</a> <!-- Dont work -->
<a ng-href="#/{{ 'myPage' }}">link</a> <!-- Dont work -->
<a href="#/myPage" target="_self">link</a> <!-- Work ! -->
</div>
ng-href의 문제와 결과가 href와 다른 이유를 이해할 수 없습니다.나는 각진 1.2를 쓴다.
ngHref는 다음과 같이 각도 변수를 href 속성에 동적으로 바인드하기 위해 사용됩니다.
<a ng-href="#/{{myPathVariable}}"/>Take Me Somewhere</a>
범위 내 위치:
$scope.myPathVariable = 'path/to/somewhere';
각도로 컴파일 한 후 다음과 같이 됩니다.
<a ng-href="#/path/to/somewhere" href="#/path/to/somewhere" ... other angular attributes>Take Me Somewhere</a>
패스가 페이지에 하드코드 되어 있는 경우(링크가 페이지 로드 시 어디로 이동해야 하는지 알고 있습니다), href로 지정할 수 있기 때문에 세 번째 예가 기능합니다.사용만ngHrefJS 로드 후 동적으로 루트를 결정하기 위해 각도가 필요한 경우.이렇게 하면 사용자가 링크를 클릭하여 비활성 루트로 이동하는 것을 방지하고 각도가 링크를 가리키는 위치를 해독할 수 있습니다.매뉴얼은 이쪽
언급URL : https://stackoverflow.com/questions/23810995/angular-js-how-to-use-ng-href-in-template
반응형
'programing' 카테고리의 다른 글
| 저장된 텍스트 영역에서 반응 표시 줄 바꿈 (0) | 2023.04.03 |
|---|---|
| Visual Studio 코드 자동 가져오기 (0) | 2023.04.03 |
| Jackson JSON: json-tree에서 노드 이름 가져오기 (0) | 2023.04.03 |
| WooCommerce Cart의 특정 제품 속성 및 메타 데이터 에코 (0) | 2023.04.03 |
| react - typescript를 사용하여 컨텍스트를 만들 때 네임스페이스 'ctx'를 찾을 수 없습니다. (0) | 2023.04.03 |