通过ng-click调用指令中的绑定函数

Question

我想知道当单击div的一部分时，我能够在指令中调用绑定函数。我目前有一个div与另一个div内部作为一个按钮来扩展div。大div有一个可扩展的指令。我想点击div角落的箭头，让箭头的ng-click调用expandable指令中的绑定函数。这可能吗？如果是这样，我该如何实现呢？

这是div的图片：

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

Answer 1

如果指令使用隔离范围（scope: {}），托管该指令的元素的内容（即子元素）与指令的范围不同，我怀疑这是你所拥有的。

为了将内容链接到相同的范围，您需要手动转换它们：

.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的第一个参数是转换内容链接的范围，在这种情况下，它是指令的范围。

请记住，从您的指令用户的角度来看，它有点尴尬，因为现在他们有HTML引用一些“魔术”变量/函数（当然由以下定义：你的指令）对于观察HTML的人来说并不明显。想象一下，你遇到了一些类似的指令foo：

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

并且foobar和doSomethingFoo是在foo指令的范围内定义的 - 如果不知道foo的具体内容将会更加难以解释