angularjs $broadcast 和 $on 的使用及其注意事项

时间:2023-03-09 16:09:48
angularjs $broadcast 和 $on 的使用及其注意事项

下面是demo:

<div ng-controller="ParentCtrl">                 www.111cn.net //父级
<div ng-controller="SelfCtrl"> //自己
<a ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div> //子级
</div>
<div ng-controller="BroCtrl"></div> //平级
</div> phonecatControllers.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'child');
$scope.$emit('to-parent', 'parent');
}
});
phonecatControllers.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(event,data) {
console.log(data); //父级能得到值
});
$scope.$on('to-child', function(event,data) {
console.log(data); //子级得不到值
});
});
phonecatControllers.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(event,data) {
console.log(data); //子级能得到值
});
$scope.$on('to-parent', function(event,data) {
console.log(data); //父级得不到值
});
});
phonecatControllers.controller('BroCtrl', function($scope){
$scope.$on('to-parent', function(event,data) {
console.log(data); //平级得不到值
});
$scope.$on('to-child', function(event,data) {
console.log(data); //平级得不到值
});
});

以上是例子: 
值得注意的一些事情是,也是我自己遇到的,如果你要使用一个ctr1的兄弟ctr2 那么会首先通过ctr1传递事件到父ctr,然后再由父ctr广播到另一个控制ctr2 中 这里从ctr1到ctr 中的 
emit(′ctr1event′,′ctr1′);以及从ctr到ctr2的broadcast(‘ctrevent’,’ctr’); 两个中的ctr1event和ctrevent不能一样,一样的话会导致事件广播的无线循环,另外就是$on(‘dddd’,function(event,data){}); 记得不要少写function中的参数的event或者data ,其实少写是可以运行的,但是会出问题,具体没尝试,也是自己遇到过的问题, 
就是以上这些了,希望对你有帮助

相关文章