javascript - 从 ng-click 调用指令内的绑定(bind)函数

Question

我想知道当单击 div 的一部分时，我是否能够在指令中调用绑定(bind)函数。我目前有一个 div，里面有另一个 div，用作展开 div 的按钮。大 div 有一个使其可扩展的指令。我想单击 div Angular 上的箭头，并让箭头的 ng-click 调用可扩展指令内的绑定(bind)函数。这可能吗？如果可以，我该如何实现？

这是 div 的图片:

<div expandable class="boxWithBorderStyle"> 
   <div class="arrowStyle" ng-click="someFuncInsideExpandableDirective()"> </div>
</div>

Answer 1

如果指令使用隔离范围(范围:{})，则托管指令的元素的内容(即子元素)与指令的范围不同，我怀疑这就是您的范围有。

为了将内容链接到同一范围，您需要手动嵌入它们:

.directive("expandable", function(){
  return {
    transclude: true,
    scope: {
       // whatever you have now
    },
    link: function(scope, element, attrs, ctrls, transcludeFn){
       transcludeFn(scope, function(contentClone){
         element.append(contentClone);
       });

       // here you can expose whatever functions you want on the isolate scope:
       scope.someFuncInsideExpandableDirective = function(){
          // do something
       }
    }
  };
});

嵌入函数 transcludeFn 的第一个参数是嵌入内容所链接的范围，在本例中是指令的范围。

但请记住，从指令用户的 Angular 来看，这有点尴尬，因为现在他们有 HTML 引用一些“神奇”变量/函数(当然是由你的指令)对于观察 HTML 的人来说并不明显。想象一下，您会遇到一些执行类似操作的指令 foo:

 <div foo="abc">
   {{foobar}}
   <button ng-click="doSomethingFoo()">do foo</button>
 </div>

和 foobar 和 doSomethingFoo 是在 foo 指令的范围内定义的 - 如果不知 Prop 体细节，则很难破译foo 发生了什么事。