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);
            });
        }]);
  • 相关阅读:
    nodejs安装
    Python基本知识3----序列
    jdk环境变量配置
    sublime text3插件的安装
    QTP基本方法4------手动写入信息到测试结果报告中
    QTP基本方法3-----截屏
    QTP基本方法2------截取字符串
    QTP基本方法
    python文件操作指令
    XSStrike工具的安装使用
  • 原文地址:https://www.cnblogs.com/leijiuling/p/5581661.html
Copyright © 2011-2022 走看看