NG-类将不会自定义指令触发 [英] ng-class will not trigger on custom directive
问题描述
我目前正在开发的一个AngularJS 滑动菜单指令。 JavaScript的包括三种类型的指令组成:指令滑动菜单的各个类型(为了简洁起见,我只包括左侧滑动菜单),对于屏幕的其余部分一个包装指令, asmWrapper ,然后一个控制按钮指令, asmControl 。目前,所有这些指令都使用一个服务, asmService 以沟通。
当用户点击一个asmControl,该指令的控制器呼吁asmService确定哪些菜单已被触发并发出在$ rootScope一个'asmEvent的方法。 asmSlidingMenu 的控制器将捕获该事件并更新在其范围内活动的变量,但DOM元素的CSS类保持不变。
我想在纳克级未被设置。我该如何解决这个问题?
我已经包括code下面的asmSlidingMenu指令。要了解更完整的示例,请查看 Plunker 我做了。
slideMenu.directive('asmSlideLeft',['$ rootScope','asmService',
功能($ rootScope,asmService){
返回{
限制:AEC
, 范围: {}
,控制器:功能($范围){
$ rootScope。在$('asmEvent',函数(事件,道具){
的console.log('截获:'+ asmService.asmStates.slideLeft.active);
$ scope.active = asmService.asmStates.slideLeft.active;
});
}
编译:功能(元素,ATTRS){
ATTRS $集(类,ASM ASM-水平ASM-左')。
ATTRS $集(数据纳克级,{ASM-左边开:激活}')。
返回{
pre:函数$ P $砰砰(范围,iElement,iAttrs){}
,后:功能postLink(范围,iElement,iAttrs){}
}
}
}
}]);
首先有效
是一个隔离范围,所以纳克级
有没有打开。
第二,更重要的是,纳克级
添加在元素的指令已被角收集。这是为时已晚。
有没有理由使用纳克级
如果你有自己的指令。
slideMenu.directive('asmSlideLeft',['$ rootScope','asmService',
功能($ rootScope,asmService){
返回{
限制:AEC
...
链接:功能(范围,元素){
element.addClass('ASM ASM-水平ASM左');
$ rootScope。在$('asmEvent',函数(){
如果(asmService.asmStates.slideLeft.active){
element.addClass('ASM-向左开口');
}
其他{
element.removeClass('ASM-向左开口');
}
...
I am currently developing a slide menu directive for 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, asmService to communicate.
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.
I assume the ng-class is not being set. How do I fix this?
I have included the code for the asmSlidingMenu directive below. To see a more complete example, view the Plunker I made.
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) {}
}
}
}
}]);
First of all active
is in an isolate scope, so ng-class
has no access to it.
Secondly, and more importantly, ng-class
is added after the directives of the element have been collected by angular. It's too late.
There's no reason to use ng-class
if you have your own directive.
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');
}
...
这篇关于NG-类将不会自定义指令触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!