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);
        });
    }]);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM