zoukankan      html  css  js  c++  java
  • 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);ctrctr2broadcast(‘ctrevent’,’ctr’); 两个中的ctr1event和ctrevent不能一样,一样的话会导致事件广播的无线循环,另外就是$on(‘dddd’,function(event,data){}); 记得不要少写function中的参数的event或者data ,其实少写是可以运行的,但是会出问题,具体没尝试,也是自己遇到过的问题, 
    就是以上这些了,希望对你有帮助

  • 相关阅读:
    2.Android之按钮Button和编辑框EditText学习
    《DSP using MATLAB》Problem 3.8
    《DSP using MATLAB》Problem 3.7
    《DSP using MATLAB》Problem 3.6
    《DSP using MATLAB》Problem 3.5
    《DSP using MATLAB》Problem 3.4
    《DSP using MATLAB》Problem 3.3
    《DSP using MATLAB》Problem 3.2
    《DSP using MATLAB》Problem 3.1
    《DSP using MATLAB》Problem 2.20
  • 原文地址:https://www.cnblogs.com/tzz-ing/p/5881298.html
Copyright © 2011-2022 走看看