如何使用 .$emit 和 .$on 方法将我的 $scope 对象从一个控制器发送到另一个控制器?
您可以在应用程序的层次结构中发送任何您想要的对象,包括$scope。
这是关于广播和发射如何工作的一个快速概念。
注意下面的节点;全部嵌套在节点 3中。当您遇到这种情况时,您可以使用广播和发射。
注意:本例中每个节点的数量是任意的;它很容易成为第一;第二个;甚至是 1,348。每个数字只是这个例子的一个标识符。这个例子的重点是展示 Angular 控制器/指令的嵌套。
3
------------
| |
----- ------
1 | 2 |
--- --- --- ---
| | | | | | | |
看看这棵树。你如何回答以下问题?
注意:还有其他方法可以回答这些问题,但在这里我们将讨论广播和发射。此外,在阅读以下文本时,假设每个数字都有自己的文件(指令、控制器),例如 one.js、two.js、three.js。
如何节点1所讲至节点3?
在文件one.js 中
scope.$emit('messageOne', someValue(s));
在文件three.js - 需要通信的所有子节点的最上层节点。
scope.$on('messageOne', someValue(s));
节点 2 如何与节点 3 对话?
在文件two.js 中
scope.$emit('messageTwo', someValue(s));
在文件three.js - 需要通信的所有子节点的最上层节点。
scope.$on('messageTwo', someValue(s));
节点 3 如何与节点 1 和/或节点 2 通信?
在文件three.js - 需要通信的所有子节点的最上层节点。
scope.$broadcast('messageThree', someValue(s));
在文件one.js && two.js 中,您想要捕获消息的任何文件或两者。
scope.$on('messageThree', someValue(s));
节点 2 如何与节点 1 对话?
在文件two.js 中
scope.$emit('messageTwo', someValue(s));
在文件three.js - 需要通信的所有子节点的最上层节点。
scope.$on('messageTwo', function( event, data ){
scope.$broadcast( 'messageTwo', data );
});
在文件one.js 中
scope.$on('messageTwo', someValue(s));
然而
当您让所有这些嵌套的子节点尝试像这样进行通信时,您会很快看到许多$on's、$broadcast's和$emit's。
这是我喜欢做的事情。
在最上面的父节点(在这种情况下为3 ...),它可能是您的父控制器...
所以,在文件three.js
scope.$on('pushChangesToAllNodes', function( event, message ){
scope.$broadcast( message.name, message.data );
});
现在在任何子节点中,您只需要$emit消息或使用$on捕获它。
注意:在不使用$emit、$broadcast或$on 的情况下,在一个嵌套路径中串扰通常很容易,这意味着大多数用例都用于尝试让节点1与节点2进行通信,反之亦然。
节点 2 如何与节点 1 对话?
在文件two.js 中
scope.$emit('pushChangesToAllNodes', sendNewChanges());
function sendNewChanges(){ // for some event.
return { name: 'talkToOne', data: [1,2,3] };
}
在文件three.js - 需要通信的所有子节点的最上层节点。
我们已经处理过这个了还记得吗?
在文件one.js 中
scope.$on('talkToOne', function( event, arrayOfNumbers ){
arrayOfNumbers.forEach(function(number){
console.log(number);
});
});
您仍然需要将$on与您想要捕获的每个特定值一起使用,但是现在您可以在任何节点中创建您喜欢的任何内容,而不必担心在我们捕获和广播时如何通过父节点间隙获取消息通用pushChangesToAllNodes。
希望这可以帮助...