Angular를 적용하는 방법ng-class에 의해 설정된 클래스에 기반한 JS 디렉티브?
클래스에 따라 요소에 명령어를 조건부로 적용하려고 합니다.
여기 제 문제의 간단한 예가 있습니다. 이 바이올린의 결과를 보세요.이 예에서는 클래스 이름 맵을 사용하여 부울 형식을 사용하고 있습니다.ng-class
와 함께true
제 경우 함수의 부울 결과를 사용하고 싶습니다.
마크업:
<div ng-app="example">
<div class="testcase">
This will have the directive applied as I expect
</div>
<div ng-class="{'testcase':true}">
This will not have the directive applied but I expect it to
</div>
</div>
JS:
angular.module('example', [])
.directive('testcase', function() {
return {
restrict: 'C',
link: function(scope, element, attrs) {
element.css('color', 'red');
}
}
}
);
왜 지시가 에 적용되지 않는 거죠?div
그것은 그 수업을 통과시키고 있다ng-class
Angular의 순서에 대해 제가 오해하고 있는 건가요?JS가 지시사항을 처리하고 있습니까?
표현식의 평가를 기반으로 요소에 명령어를 조건부로 적용하는 방법은 무엇입니까?
ng-class
컴파일 프로세스 후에 DOM 상에서 클래스를 설정합니다.
디렉티브를 적용하는 더 좋은 방법은 HTML 속성을 사용하는 것입니다.
<div test-case>
물론 이것은 조건적인 것은 아니지만, 저는 지시를 따르겠습니다.
<div ng-app="example" ng-controller="exampleCtrl">
<div test-case condition="dynamicCondition">Hello</div>
<input type="checkbox" ng-model="dynamicCondition"/> Condition
</div>
그리고.
angular.module('example', [])
.controller('exampleCtrl', function ($scope) {
$scope.dynamicCondition = false;
})
.directive('testCase', function () {
return {
restrict: 'A',
scope: {
'condition': '='
},
link: function (scope, element, attrs) {
scope.$watch('condition', function(condition){
if(condition){
element.css('color', 'red');
}
else{
element.css('color', 'black');
};
});
}
}
});
지시명은 다음과 같습니다.testCase
보다는testcase
,그scope: {'condition': '='},
비트는 조건 Atribute가 동기화되어 다음과 같이 사용 가능함을 보증합니다.scope.condition
및 그watch
는 첫 번째 식에서 값이 변경될 때마다 두 번째 인수를 평가합니다.여기 JsFiddle.
다음 사항도 검토해야 할 것 같습니다.
<div ng-switch="conditionFunction()">
<div ng-when="true" test-case>Contents when conditionFunction() returns true</div>
<div ng-when="false">Contents when conditionFunction() returns false</div>
</div>
angular.module('example', [])
.directive('testCase', function() {
return {
restrict: 'C',
link: function(scope, element, attrs) {
element.css('color', 'red');
}
}
})
저에 따르면 이 질문처럼 ng-class에 의해 설정된 클래스를 기반으로 한 조건부 지시어를 사용하지 마십시오.
이것을 사용하지 마세요.
<div ng-app="example">
<div class="testcase">
This will have the directive applied as I expect
</div>
<div ng-class="{'testcase':true}">
This will not have the directive applied but I expect it to
</div>
</div>
복잡한 상황에서는 다루기가 매우 복잡하기 때문에 항상 커스텀 디렉티브의 조건을 사용합니다.
이것을 사용하다
link: function (scope, element, attrs) {
scope.$watch('condition', function(condition){
if(condition){
// something going here
}
else{
// something going here
};
});
}
언급URL : https://stackoverflow.com/questions/18598810/how-do-i-apply-an-angularjs-directive-based-on-a-class-set-by-ng-class
'programing' 카테고리의 다른 글
지정된 이름의 모든 프로세스를 종료하려면 어떻게 해야 합니까? (0) | 2023.04.09 |
---|---|
"TypeError: process.getuid가 함수가 아닙니다"를 해결하는 방법 (0) | 2023.04.04 |
Wordpress wp_delete_attachment 파일을 미리 정의된 사용자 지정 폴더에서 삭제하도록 합니다. (0) | 2023.04.04 |
Angular.js 및 HTML5 날짜 입력 값 -- Firefox가 날짜 입력에 읽을 수 있는 날짜 값을 표시하도록 하려면 어떻게 해야 합니까? (0) | 2023.04.04 |
스프링 부트 - 초기 데이터 로드 중 (0) | 2023.04.04 |