4

在这个小提琴中，为什么顶部链接中的 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');
            }
        });
    }
  };
});
4

2 回答 2

2

这是因为您在小提琴的第 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 的工作方式。我认为这两个都将允许您根本不使用该指令。

于 2013-05-23T02:02:50.993 回答
2

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

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

请参阅更新的工作小提琴：http: //jsfiddle.net/SNQQV/3/

于 2013-05-23T02:06:12.520 回答