如何将我的$scope对象从一个控制器发送到另一个使用。$emit和。$on方法?
function firstCtrl($scope) {
$scope.$emit('someEvent', [1,2,3]);
}
function secondCtrl($scope) {
$scope.$on('someEvent', function(mass) { console.log(mass); });
}
这不是我想的那样。$emit和$on如何工作?
当前回答
首先，亲子范围关系确实很重要。你有两种可能触发事件:
$broadcast——向下分派事件到所有子作用域， $emit——通过作用域层次结构向上分派事件。
我对你的控制器(作用域)关系一无所知，但有几个选项:
If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl: function firstCtrl($scope) { $scope.$broadcast('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(event, mass) { console.log(mass); }); } In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl). function firstCtrl($rootScope) { $rootScope.$broadcast('someEvent', [1,2,3]); } Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope: function firstCtrl($scope) { $scope.$on('someEvent', function(event, data) { console.log(data); }); } function secondCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); }
其他回答
根据angularjs事件文档，接收端应该包含这样结构的参数
@params
——{Object} event是包含事件信息的事件对象
——由被调用者传递的{Object}参数(注意，这只能是一个，所以总是在字典对象中发送更好)
美元的范围。$on('fooEvent'，函数(事件，args) {console.log(args)}); 从你的代码
另外，如果你想让共享信息在不同的控制器间可用，还有另一种方法可以实现，那就是angular服务。由于服务是单例的，信息可以跨控制器存储和获取。只需在该服务中创建getter和setter函数，公开这些函数，在服务中创建全局变量并使用它们存储信息
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('MyApp',[]);
app.controller('parentCtrl',function($scope){
$scope.$on('MyEvent',function(event,data){
$scope.myData = data;
});
});
app.controller('childCtrl',function($scope){
$scope.fireEvent = function(){
$scope.$emit('MyEvent','Any Data');
}
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="parentCtrl" ng-model="myName">
{{myData}}
<div ng-controller="childCtrl">
<button ng-click="fireEvent()">Fire Event</button>
</div>
</div>
</body>
</html>
首先，亲子范围关系确实很重要。你有两种可能触发事件:
$broadcast——向下分派事件到所有子作用域， $emit——通过作用域层次结构向上分派事件。
我对你的控制器(作用域)关系一无所知，但有几个选项:
If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl: function firstCtrl($scope) { $scope.$broadcast('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(event, mass) { console.log(mass); }); } In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl). function firstCtrl($rootScope) { $rootScope.$broadcast('someEvent', [1,2,3]); } Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope: function firstCtrl($scope) { $scope.$on('someEvent', function(event, data) { console.log(data); }); } function secondCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); }
如何将我的$scope对象从一个控制器发送到另一个使用。$emit和。$on方法?
你可以在应用的层次结构中发送任何你想要的对象，包括$scope。
下面简要介绍一下广播和发射的工作原理。
注意下面的节点;都嵌套在节点3中。在这种情况下使用broadcast和emit。
注意:本例中每个节点的编号是任意的;它很容易成为第一;数字2;甚至是1348。对于这个例子，每个数字只是一个标识符。这个例子的重点是展示Angular控制器/指令的嵌套。
3
------------
| |
----- ------
1 | 2 |
--- --- --- ---
| | | | | | | |
看看这棵树。你如何回答以下问题?
注意:还有其他方法来回答这些问题，但这里我们将讨论广播和发射。此外，当阅读下面的文本时，假设每个数字都有自己的文件(指令，控制器)例如one.js, two.js, three.js。
节点1如何与节点3通信?
在文件1。js中
scope.$emit('messageOne', someValue(s));
在文件3 .js中——所有需要通信的子节点的最上面的节点。
scope.$on('messageOne', someValue(s));
节点2如何与节点3通信?
在文件two.js中
scope.$emit('messageTwo', someValue(s));
在文件3 .js中——所有需要通信的子节点的最上面的节点。
scope.$on('messageTwo', someValue(s));
节点3如何与节点1和/或节点2通信?
在文件3 .js中——所有需要通信的子节点的最上面的节点。
scope.$broadcast('messageThree', someValue(s));
在文件one.js && two.js中，你想要捕获消息的文件或两者都有。
scope.$on('messageThree', someValue(s));
节点2如何与节点1通信?
在文件two.js中
scope.$emit('messageTwo', someValue(s));
在文件3 .js中——所有需要通信的子节点的最上面的节点。
scope.$on('messageTwo', function( event, data ){
scope.$broadcast( 'messageTwo', data );
});
在文件1。js中
scope.$on('messageTwo', someValue(s));
然而
当所有这些嵌套的子节点试图像这样通信时，您将很快看到许多$on、$broadcast和$emit。
这是我喜欢做的事情。
在最上面的父节点中(在本例中是3…)，这可能是你的父控制器…
在文件3。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] };
}
在文件3 .js中——所有需要通信的子节点的最上面的节点。
我们已经处理过了，记得吗?
在文件1。js中
scope.$on('talkToOne', function( event, arrayOfNumbers ){
arrayOfNumbers.forEach(function(number){
console.log(number);
});
});
您仍然需要对想要捕获的每个特定值使用$on，但是现在您可以在任何节点中创建您喜欢的任何值，而不必担心在捕获和广播通用的pushChangesToAllNodes时如何通过父节点间隙获取消息。
作用域可用于将事件传播、分派到作用域的子对象或父对象。
$emit -将事件传播到父节点。$broadcast -向儿童传播事件。 监听事件的方法，由$emit和$broadcast传播。
index . html示例:
<div ng-app="appExample" ng-controller="EventCtrl">
Root(Parent) scope count: {{count}}
<div>
<button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
<button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br>
Childrent scope count: {{count}}
</div>
</div>
示例app.js:
angular.module('appExample', [])
.controller('EventCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function() {
$scope.count++;
});
}]);
在这里你可以测试代码: http://jsfiddle.net/zp6v0rut/41/
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中，什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项，如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前，每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
