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

Question

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

这是 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 的具体情况，将更难以破译。