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

这是因为你在小提琴的第14行创建了一个隔离范围，clickTheLink函数只存在于控制器中，而不存在于指令中。虽然我强烈建议不要这样做，但您可以通过$ parent

快速访问父作用域

        <a class="disableable" target="_blank" disable="disableTheLink" ng-click="$parent.clickTheLink()">A disableable link!</a>

将此代码放入允许小提琴正常工作。这是它的小提琴：http://jsfiddle.net/bpN9b/10/

我的建议是研究ngClass如何工作以及ngDisabled。我认为这两个都允许你根本不使用这个指令。

Answer 2

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

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

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

自定义指令干扰ng Click

2 个答案: