Question

所以我有一个函数我想传递给父控制器使用 - 我在一个指令里面有一个指令（Directiveception），它将触发该函数。我没有把这变成一个指令的自由，而是一个带有两个嵌套指令的指令，所以我想知道是否有一种更简单/更好的方式来做，而不是我认为它会起作用。< / p>

所以我有最外面的指令（这些是受类限制的）

<div class="builder-result-filters" filter-obj="filterModelInstance" update-filter="filterClicked"> </div>

然后是那个内部的那个

<div>
<ul ng-repeat="filter in filterObj.filters" class="builder-result-single-filter" filter="filter">
</ul>

然后在那里

  <ul>{{filter.name}}
<li ng-repeat="item in filter.values track by $index" class="build-result-filter-value" val="item">

</li>

然后最后

 <li>
<input type="checkbox"  ng-change="filterChange()" ng-model="val.checked">  {{val.name}}

我在这里尝试完成的是获取ng-change =＆＃34; filterChange（）＆＃34;，以触发最顶层的指令。我的初步想法是，我必须通过像

这样的隔离范围将它传递到每个级别

 scope : {
       passedFunction: '=' //pass the function down to the bottom directive
  }

但我想知道我是否可以放弃在每个级别上执行此操作，或者是否有更简单的解决方案。感谢您抽出宝贵时间阅读。

Answer 1

您正在寻找的解决方案是require。它在＆＃34;创建通信指令＆＃34;在官方docs。

基本上你要做的是在堆栈中的任意指令中访问top指令的控制器（例如bot）

<top>
  <mid>
    <bot>     
    </bot>
  </mid>
</top>

在底部指令的代码中，您使用require和顶部指令的名称进行连线

.directive('top', ... )
// ...
.directive('bot', function() {
  return {
    require: '^top',
    restrict: 'E',
    scope: {
      // ...
    },
    link: function(scope, element, attrs, topCtrl) {
      scope.onClick = function() {
        topCtrl.doSomething("from bot");
      }
    },
    template: '<button ng-click="onClick()">Click Bot</button>'
  };

以下是Plunkr中的整个example

Answer 2

在leaf指令中使用 require 来要求root指令。然后，对root指令的引用将作为叶子指令的链接函数中的引用传入。现在你可以在leaf指令中调用root.filterChange（）。

您还可以使用$ scope。$ parent。$ parent ..返回叶子指令的$ scope来获取root指令的$ scope及其filterChange函数。

Angular，connect函数嵌套在子指令（几个级别下）到父控制器

2 个答案: