angularjs – 干扰ngClick的自定义指令

前端之家收集整理的这篇文章主要介绍了angularjs – 干扰ngClick的自定义指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
this fiddle中,为什么顶部链接中的ngClick有效,但是我添加自定义指令的链接中的ngClick完全无法正常工作?

<a class="regular" ng-click="clickTheLink()">A regular ng-click link</a>
<a class="disableable" disable="disableTheLink" ng-click="clickTheLink()">A disableable link!</a>

据我所知,我在指令中所做的一切都不应该干扰ngClick行为,因为它只是操纵CSS类:

app.directive('disableable',function(){
  return {
    restrict: 'C',scope: { disable: '&' },link: function (scope,elem,attrs) {
        scope.$watch(scope.disable,function (val) {
            if (val){
                elem.addClass('disabled');
                elem.removeClass('enabled');
            }
            else {
                elem.addClass('enabled');
                elem.removeClass('disabled');
            }
        });
    }
  };
});

解决方法

问题是,每个DOM元素只有一个范围.因此,如果任何指令使用像您在这里使用的隔离范围,那么它将成为元素上唯一的范围.该范围与任何父范围完全断开,在您的示例中,clickTheLink不在那里.

简单的答案是不使用隔离范围.这是一个非常好的语法,但您可以手动完成它所做的一切.对于’&’ params,你可以使用解析服务来解析属性表达式.

查看更新的工作小提琴:
http://jsfiddle.net/SNQQV/3/

猜你在找的Angularjs相关文章