반응형
Angular에서 HTML로 모듈의 상수에 직접 액세스하는 방법JS
몇 개의 상수를 html로 직접 사용하고 싶다(컨트롤러에서는 몇 번).
예를 들어, 이것은 메인 앱 모듈입니다.
angular.module('website', [])
.constant('ROUTES', (function () {
return {
SIGN_IN: '/sign/in'
}
})())
.config([..., 'ROUTES', function(..., ROUTES {
$routeProvider.when(ROUTES.SIGN_IN, {templateUrl: 'pages/sign_in.html', controller: 'SignInController'});
}]);
컨트롤러의 상수를 사용하는 방법은 명확합니다.
하지만 어떻게 하면 이런 일을 할 수 있을까요?
<html ng-app="website">
<body>
<a href="{{ROUTES.SIGN_IN}}">Sign in</a>
</body>
</html>
포인트는 모든 루트를 한 곳에 유지하는 것입니다.그럼 내가 이걸 할 수 있을까, 아니면 내가 잘못 선택한 걸까?
IMHO는 $rootScope In html을 사용하여 $rootScope에서 모든 스코프가 $rootScope에서 상속되므로 현재 스코프 angular에 변수가 없는 경우 $rootScope에서 선언된 변수를 사용합니다.
실행 "단계"에서 초기화하는 것이 좋습니다.
angular.module('myApp')
.run(function ($rootScope) {
$rootScope.ROUTES = ROUTES
});
다른 답변과 약간 비슷하지만 IMO 클리너:
angular.module('website')
.constant("ROUTES", {
SIGN_IN: "/sign/in"
})
.run(function ($rootScope, ROUTES) {
$rootScope.ROUTES = ROUTES;
});
그리고:
<a href="{{ROUTES.SIGN_IN}}">Sign in</a>
HTH
$rootScope 접근법도 좋지만 상황에 따라서는 필터를 사용한 적이 있습니다.
간단한 예로 BuildVersion이라는 속성을 가진 객체로 정의된 상수 CONFIG가 있다고 가정합니다.다음과 같은 필터를 만들 수 있습니다.
angular.module('myApp')
.filter('interpolate', ['CONFIG', function (CONFIG) {
return function (text) {
return String(text).replace(/\%VERSION\%/mg, CONFIG.BuildVersion);
};
}]);
HTML에서 다음을 수행합니다.
<html ng-app="website">
<body>
<div>{{'%VERSION%' | interpolate}}</div>
</body>
</html>
또는
<html ng-app="website">
<body>
<div>{{'bla bla bla %VERSION%.' | interpolate}}</div>
</body>
</html>
또한 ROR과 마찬가지로 도우미를 사용할 수 있습니다.
https://gist.github.com/merqlove/491023bcdd2145eef169#file-readme-md
언급URL : https://stackoverflow.com/questions/17505138/how-to-directly-access-modules-constant-in-html-on-angularjs
반응형
'IT' 카테고리의 다른 글
| 기능하는 setState 내에서 이벤트 대상이 null입니다. (0) | 2023.03.09 |
|---|---|
| Wordpress admin-ajax.php 400의 잘못된 요청 (0) | 2023.03.09 |
| Wordpress 오류: TimThumb 오류가 발생했습니다. (0) | 2023.03.09 |
| 'java.util' 유형의 값을 역직렬화할 수 없습니다.String에서 (0) | 2023.03.09 |
| 각도에서 jQuery 플러그인을 통합하는 올바른 방법JS (0) | 2023.03.09 |