如何将我的$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如何工作?
当前回答
根据angularjs事件文档，接收端应该包含这样结构的参数
@params
——{Object} event是包含事件信息的事件对象
——由被调用者传递的{Object}参数(注意，这只能是一个，所以总是在字典对象中发送更好)
美元的范围。$on('fooEvent'，函数(事件，args) {console.log(args)}); 从你的代码
另外，如果你想让共享信息在不同的控制器间可用，还有另一种方法可以实现，那就是angular服务。由于服务是单例的，信息可以跨控制器存储和获取。只需在该服务中创建getter和setter函数，公开这些函数，在服务中创建全局变量并使用它们存储信息
其他回答
这是我的函数:
$rootScope.$emit('setTitle', newVal.full_name);
$rootScope.$on('setTitle', function(event, title) {
if (scope.item)
scope.item.name = title;
else
scope.item = {name: title};
});
你必须使用$rootScope在同一个应用程序的控制器之间发送和捕获事件。下面是一个工作示例。
app.controller('firstCtrl', function($scope, $rootScope) {
function firstCtrl($scope) {
{
$rootScope.$emit('someEvent', [1,2,3]);
}
}
app.controller('secondCtrl', function($scope, $rootScope) {
function secondCtrl($scope)
{
$rootScope.$on('someEvent', function(event, data) { console.log(data); });
}
}
链接到$scope对象的事件只在所有者控制器中工作。控制器之间的通信是通过$rootScope或Services完成的。
最简单的方法:
超文本标记语言
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="sendData();"> Send Data </button>
</div>
JavaScript
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
function sendData($scope) {
var arrayData = ['sam','rumona','cubby'];
$rootScope.$emit('someEvent', arrayData);
}
});
app.controller('yourCtrl', function($scope, $rootScope) {
$rootScope.$on('someEvent', function(event, data) {
console.log(data);
});
});
</script>
我还会建议第四个选项，作为@zbynour提议的选项的更好替代方案。
使用rootScope美元。$emit而不是$rootScope。不管发送和接收控制器之间的关系。这样，事件就保留在$rootScope的集合中。$$监听器，而$rootScope。将事件传播到所有子作用域，其中大多数子作用域可能不是该事件的监听器。当然，在接收控制器端，你只需使用$rootScope。$on。
对于这个选项，你必须记得销毁控制器的rootScope监听器:
var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
unbindEventHandler();
});
<!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>
