当前位置:   article > 正文

angularjs $broadcast 和 $on 的使用及其注意事项_angularjs $broadcast 会导致页面锁死?重复请求、

angularjs $broadcast 会导致页面锁死?重复请求、

在同一页面时候,一般会有不同的ctr控制不同的模块,那么要在不同的ctr之间传递事件就需要用到 broadcaston来传播和接收事件
下面是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);        //平级得不到值
    });
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/222783
推荐阅读
相关标签
  

闽ICP备14008679号