angularjs - 自定义指令干扰 ngClick

Question

在 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');
            }
        });
    }
  };
});

Answer 1

问题是，每个 DOM 元素只有一个作用域。因此，如果任何指令像您在此处使用的那样使用隔离范围，那么它将成为该元素上唯一的范围。该作用域与任何父作用域完全断开连接，在您的示例中，clickTheLink 不在其中。

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

查看更新的工作 fiddle : http://jsfiddle.net/SNQQV/3/