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 ,其实少写是可以运行的,但是会出问题,具体没尝试,也是自己遇到过的问题, 
    就是以上这些了,希望对你有帮助

  • 相关阅读:
    swjtu oj Paint Box 第二类斯特林数
    B -- RE:从零开始的异世界生活 线段树
    EOJ Problem #3261 分词 trie + dp + 小剪枝
    129. 笔芯值
    F. Coprime Subsequences 莫比乌斯反演
    F. Clique in the Divisibility Graph DP
    D. Restructuring Company 并查集 + 维护一个区间技巧
    scut 125. 笔芯回文
    几个链接
    位处理的低级筛法
  • 原文地址:https://www.cnblogs.com/tzz-ing/p/5881298.html
Copyright © 2011-2022 走看看