javascript ng-class 不会在自定义指令上触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23304673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-class will not trigger on custom directive
提问by Elzair
I am currently developing a slide menu directivefor AngularJS. The javascript consists of three types of directives: the directives for each type of sliding menu (for brevity's sake I only included the left sliding menu), one wrapper directive for the rest of the screen, asmWrapper, and one control button directive, asmControl. Currently, all of these directives are using a service, asmServiceto communicate.
我目前正在为 AngularJS开发一个幻灯片菜单指令。javascript 包含三种类型的指令：针对每种类型的滑动菜单的指令（为简洁起见，我只包括左侧滑动菜单），一个用于屏幕其余部分的包装器指令asmWrapper和一个控制按钮指令asmControl。目前，所有这些指令都使用服务asmService进行通信。
When the user clicks an asmControl, that directive's controller calls a method on asmService that determines which menu has been triggered and emits an 'asmEvent' on the $rootScope. asmSlidingMenu's controller will catch that event and update the active variable in its scope, but the DOM element's CSS class remains unchanged.
当用户单击 asmControl 时，该指令的控制器调用 asmService 上的一个方法，该方法确定已触发哪个菜单并在 $rootScope 上发出“asmEvent”。asmSlidingMenu的控制器将捕获该事件并更新其范围内的活动变量，但 DOM 元素的 CSS 类保持不变。
I assume the ng-classis not being set. How do I fix this?
我假设未设置ng-class。我该如何解决？
I have included the code for the asmSlidingMenu directive below. To see a more complete example, view the PlunkerI made.
我在下面包含了 asmSlidingMenu 指令的代码。要查看更完整的示例，请查看我制作的Plunker。
slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService',
function($rootScope, asmService) {
return {
restrict: 'AEC'
, scope: {}
, controller: function($scope) {
$rootScope.$on('asmEvent', function(event, prop) {
console.log('Intercepted: ' + asmService.asmStates.slideLeft.active);
$scope.active = asmService.asmStates.slideLeft.active;
});
}
, compile: function(element, attrs) {
attrs.$set('class', 'asm asm-horizontal asm-left');
attrs.$set('data-ng-class', '{"asm-left-open: active"}');
return {
pre: function preLink(scope, iElement, iAttrs) {}
, post: function postLink(scope, iElement, iAttrs) {}
}
}
}
}]);
回答by a better oliver
First of all activeis in an isolate scope, so ng-classhas no access to it.
首先active是在一个隔离范围内，所以ng-class无法访问它。
Secondly, and more importantly, ng-classis added afterthe directives of the element have been collected by angular. It's too late.
其次，更重要的ng-class是，在元素的指令被 angular 收集后添加。太晚了。
There's no reason to use ng-classif you have your own directive.
ng-class如果您有自己的指令，则没有理由使用。
slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService',
function($rootScope, asmService) {
return {
restrict: 'AEC'
...
link: function(scope, element) {
element.addClass('asm asm-horizontal asm-left');
$rootScope.$on('asmEvent', function() {
if (asmService.asmStates.slideLeft.active) {
element.addClass('asm-left-open');
}
else {
element.removeClass('asm-left-open');
}
...
