• 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);
            });
        }]);
  • 相关阅读:
    Maven 跳过测试的几种方式
    Java Optional 初始为空
    Java 8 中的设计模式策略
    Java 8 开始新增的 Optional 类 Optional 对象中的返回
    关于AWSIAMcertificate证书的说明
    VUE 常规截取和特殊字符之前之后截取
    vue判断字符串中是否包含某个字符串
    图片文字居中显示
    获取Java对象中所有的属性名称和属性值
    12注册中心consul
  • 原文地址:https://www.cnblogs.com/leijiuling/p/5581661.html
Copyright © 2020-2023  润新知