javascript - 指令内部模板中的 ng-click 未提供该功能

Question

ng-click不提供警报。单击指令的内部模板时，不显示警告框。

小提琴链接在这里：http: //jsfiddle.net/NNDhX/

Answer 1

您的指令有自己的隔离范围。所以函数'hi'应该在指令的范围内。如果你想传递你的控制器的功能，你应该做绑定，比如scope: { ..., hi: '&' }然后<you-directive hi='hi' ..>。这是有关此文档的链接：Understanding Transclusion and Scopes。

因此，只需将其添加到链接功能中就足够了：

  link: function(scope, element, attrs) {
  scope.hi = function() { alert("hi"); }

这是更新的小提琴：http: //jsfiddle.net/GwBAh/

Answer 2

我不知道这是否是最好的方法，但您可以在指令中使用 $parent 来访问父范围。

<a ng-click="$parent.hi();">parent</a>

这是完整小提琴示例的链接：http: //jsfiddle.net/EKDse/

Answer 3

隔离作用域的整个想法正是避免在父<->子作用域之间“共享”事物，以某种方式保护它们不被其他指令/控制器暴露和（无意地）改变。

如果您真的想避免隔离范围并共享父范围，请尝试以下操作：

首先删除指令的范围定义（如下注释）：

transclude: true,
/*scope: { title:'@zippyTitle' },*/

然后将指令元素中的属性 ( attrs) 放在指令的范围内：

scope.attrs = attrs;

注意：通过这样做，该attrs属性也将在父 (Ctrl3) 范围内可用。

最后根据scope.attrs

  template: '<div>' +
              '<div class="title">{{attrs.zippyTitle}}</div>' +
              '<div class="body" ng-transclude></div>' +
                        '<a ng-click="hi();">hi</a>' +
            '</div>',

jsFiddle：http: //jsfiddle.net/NNDhX/1/

Answer 4

指令内的控制器函数必须在转置块内调用。在指令模板中使用控制器方法会使您的指令依赖于控制器，并且由于其依赖关系（指令外部控制器）而成为不受欢迎的设计。

在您的示例中，将这段<a>代码转换为嵌入块。它使您的指令更加孤立并解决了问题：

 <div class="zippy" zippy-title="Details: {{title}}...">
  {{text}}
  <a ng-click="hi();">hi</a>
</div>