zoukankan      html  css  js  c++  java
  • angularJS广播

    控制器之间共享数据(向父级/子级控制器传递event,data),类似于service在不同的控制器中通信

    html:

    <div ng-controller="ParentCtrl">
        <div ng-controller="SelfCtrl">
            <a ng-click="click()">click</a>
            <div ng-controller="ChildCtrl"></div>
        </div>
        <div ng-controller="BroCtrl"></div>
    </div>

    js:

    angular.module('myApp', [])
        .controller('SelfCtrl', ['$scope','$rootScope', function($scope, $rootScope){
            var admin1 = {
                'name': 'father',
                'age': 45
            };
            var admin2 = {
                'name': 'Lucy',
                'age': 25
            };
            $scope.click = function() {
                //事件的发送
                //向子级控制器传递数据和事件,只有ChildCtrl能接受到广播,还有自己
                $scope.$broadcast('to-child', admin2);
                //向父级控制器传递数据和事件,只有parentCtrl能接收到广播,还有自己
                $scope.$emit('to-parent', admin1);
                //$rootScope发出的广播所有的作用域都可以接受到,
                $rootScope.$broadcast('to-bro', '平级的数据');
            }
        }]).controller('ParentCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
            //事件的接受
            $scope.$on('to-parent', function(event, data){
                console.log(event);
            });
        }]).controller('ChildCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
            $scope.$on('to-child', function(event, data){
                console.log(data);
            });
        }]).controller('BroCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
            //$scope和$rootScope都可以接受到事件
            $scope.$on('to-bro', function(event, data){
                console.log(data);
            });
            $rootScope.$on('to-bro', function(event, data){
                console.log(data);
            });
        }]);
  • 相关阅读:
    经典的阿里前端笔试题
    Javascript之浏览器兼容EventUtil
    Javascript之对象的创建
    奇妙的CSS之CSS3新特性总结
    前端优化之无阻塞加载脚本
    正则表达式规则与常见的正则表达式
    全端工程师
    最全前端面试问题及答案总结--《转载》
    奇妙的CSS之布局与定位
    关于在django框架里取已登录用户名字的问题
  • 原文地址:https://www.cnblogs.com/leijiuling/p/5581661.html
Copyright © 2011-2022 走看看