指令控制器之间的通信

Question

我知道如果我有两个嵌套的指令，我可以与throw控制器通信，要求并将其作为链接函数的第四个参数传递。

<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

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

您可以通过为两个指令传递相同的变量(by Reference)(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

我认为通信意味着在两个指令之间共享数据、状态和事件。我将在这里列出我心目中的基本方法：

1. 之所以可以在两个嵌套指令之间传递数据/状态，是因为在AngularJS中，一个子指令(在您的示例中是嵌套指令)继承了其父指令的作用域。结果，两个同级指令可以共享来自其父控制器的相同数据

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

在上面的代码中，ng兄弟和g另一个兄弟arentCtrl中定义的相同数据

2. AngularJS支持使用$broadcast、$emit和$on函数发射/广播事件/数据，文档可在此处找到：https://docs.angularjs.org/api/ng/type/$rootScope.Scope.

   $emit可用于将事件向上发送到树的层次结构，而$broadcast则向下发送，并且方向至关重要。

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

// 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){
....
})

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