Question

我知道如果我有两个嵌套指令我可以传递throw controller，require并将其作为链接函数的第四个参数传递。

<my-first-div>
   <my-seconded-div></my-seconded-div>
</my-first-div>

并且每件事都会正常工作。但是当他们没有筑巢时，我可以做同样的事情。

<my-first-div></my-first-div>
<my-seconded-div></my-seconded-div>

为什么？以及如何让他们沟通？

Answer 1

这是因为两个指令都在同一个变量引用上有观察者。因此，所有相关指令都会“注意到”已更改的值。

您可以通过为两个指令传递相同的变量（按引用）（varName：'='）来模仿这种“通信”，并在每个指令内的该变量上放置观察者。

然后，DOM层次结构无关紧要

例如：指令1：

app.directive('directive1', function () {
  return {
    restrict: 'E',
    scope: {
      myVar: '='
    }
    link: function (scope, element, attrs) {
        // do something with main directive
        console.log("directive1", scope.myVar);

        $scope.$watch("scope.myVar", function (value) {
            console.log("directive1", "value changed to:" + scope.myVar)
        });
    }
   }
});

第二条指令同样如此.. 对于这两个指令，传递相同的变量魔法会发生

Answer 2

我假设说通信，你的意思是在两个指令之间共享数据，状态和事件。我将在此列出我想到的基本方法：

您可以在两个嵌套指令之间传递数据/状态的原因是因为在AngularJS中，子指令（在您的示例中嵌套了一个）继承了父类的范围。结果，两个兄弟指令可以从其父控制器共享相同的数据。

＆＃13;

<div ng-controller="ParentCtrl">
  <ng-sibling></ng-sibling>
  <ng-another-sibling></ng-another-sibling>
</div>

＆＃13;

在上面的代码中， ng-sibling 和 ng-another-sibling 将继承在其父 ParentCtrl中定义的相同数据

AngularJS支持使用$ broadcast，$ emit和$ on function发布/播放事件/数据，文档可以在这里找到：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope。

$ emit 可用于将事件向上发送到树的层次结构，而 $ broadcast 向下发送，方向是必不可少的。

因此，你的一个指令可以调度该事件，而另一个指令可以调用它。它与jQuery触发事件的方式非常相似。

＆＃13;
＆＃13;
// In link function or controller of one directive $scope.$broadcast("EVENT_A",my_data); // Listen to EVENT_A on another directive $scope.$on("EVENT_A",function($event,data){ .... })
＆＃13;
＆＃13;
＆＃13;

虽然双向绑定或任意点火事件起初可能很有用，但它们也可能导致难以跟踪应用程序的情况。事件和数据流。如果您发现这种情况，可以考虑使用 Flux 架构与 AngularJS 并不是一个坏主意。 Redux 完全支持AngularJS，您的所有指令都可以构建为单状态组件。可以在此处找到Github仓库：https://github.com/angular-redux/ng-redux，可在此处找到有关如何使用 Redux 运行 AngularJS 的简单教程：http://blog.grossman.io/angular-1-using-redux-architecture/ < / LI>

指令控制器之间的通信

2 个答案: