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

在同一页面时候，一般会有不同的ctr控制不同的模块，那么要在不同的ctr之间传递事件就需要用到 $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',data) {
        console.log(data);         //子级得不到值
    });
});
phonecatControllers.controller('ChildCtrl',function($scope){
    $scope.$on('to-child',data) {
        console.log(data);         //子级能得到值
    });
    $scope.$on('to-parent',data) {
        console.log(data);         //父级得不到值
    });
});
phonecatControllers.controller('BroCtrl',function($scope){
    $scope.$on('to-parent',data) {
        console.log(data);        //平级得不到值
    });
    $scope.$on('to-child',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 ，其实少写是可以运行的，但是会出问题，具体没尝试，也是自己遇到过的问题， 就是以上这些了，希望对你有帮助

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!