您的位置：首页 > 其它

通过$broadcast或$emit在子级和父级controller之间进行值传递

2015-12-18 22:46 429 查看

 通过$broadcast或$emit在controller之间进行值传递，不过这些controller必须是子级或者父级关系，
$emit只能向父级parent controller传递事件event与数据data,$broadcast只能向子级child controller传递event与data，$on用于接收event与data.

  <script>
var myapp=angular.module('myapp',[]);
myapp.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$emit('to-parent', 'parent');
$scope.$broadcast('to-child', 'child');
}
});//在当前控制器内，分别给父级控制器和子级控制器传递事件和数据

myapp.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(d,data) {
console.log(data);         //父级控制器内监听上面控制器中$emit注册的事件和传递的值
});
$scope.$on('to-child', function(d,data) {
console.log(data);         //父级控制器内监听不到上面控制器中$broadcast注册的事件和传递的值，因为$broadcast注册的事件和传递的值是给子级的控制器的
});
});

myapp.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(d,data) {
console.log(data);         //同理
});
$scope.$on('to-parent', function(d,data) {
console.log(data);         //同理
});
});

myapp.controller('BroCtrl', function($scope){
$scope.$on('to-parent', function(d,data) {
console.log(data);        //平级得不到值,因为$broadcast或$emit只能给子级或父级controller传递事件和值
});
$scope.$on('to-child', function(d,data) {
console.log(data);        //同理
});
});

</script>

<body ng-app="myapp">
<div ng-controller="ParentCtrl">                //父级控制器
<div ng-controller="SelfCtrl">                //当前控制器
<a ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div>       //子级控制器
</div>

<div ng-controller="BroCtrl"></div>           //平级控制器
</div>
</body>

原文：http://blog.51yip.com/jsjquery/1602.html

用rootscope定义的值，可以在各个controller中使用:

var myapp=angular.module('myapp',[]);

myapp.controller('TestCtrl1',['$scope','$rootScope',
function($scope,$rootScope) {
$rootScope.name = '123';
}
]);
myapp.controller('TestCtrl2',['$scope','$rootScope',
function($scope,$rootScope) {
$scope.name = $rootScope.name;
}
]);

<div ng-controller="TestCtrl1">
Iset the global variable.<strong>{{$root.name}}</strong>
</div>
<div ng-controller="TestCtrl2">
1,get global variable .<strong>{{name}}</strong><br>
2,get global variable .<strong>{{$root.name}}</strong>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航