AngularJS - controller间的值传递 $broadcast $emit $on_angularjs controller broadcasr-优快云博客

本文链接：https://blog.youkuaiyun.com/stu_20052369/article/details/95617926

用$broadcast，广播，子controller可以监听获取到值；$emit，父controller可以监听，获取到值；而平级的什么都不能得到。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>

    <!-- parent level -->
    <div ng-app="myApp" ng-controller="ParentCtrl">

        <div ng-controller="SelfCtrl">
            <a ng-click="click()">click me</a>
            <!-- child level -->
            <div ng-controller="ChildCtrl"></div>
        </div>

        <div ng-controller="BroCtrl"></div>
    </div>




    <script>
        var app = angular.module('myApp', []);
        var Pcontroller = app.controller('ParentCtrl', function ($scope) {

            $scope.$on("to-child", function(e,data){
             console.log("parent level:"+data);
            });

            $scope.$on("to-parent", function(e,data){
             console.log("parent level:"+data);
            });
        });
        

        var Scontroller = app.controller('SelfCtrl', function ($scope) {

            $scope.click = function(){
                $scope.$broadcast("to-child","childData"); // first arg: event type, second arg: event data 
                $scope.$emit("to-parent","parentData");
            }

        });
        
        var Ccontroller = app.controller('ChildCtrl', function ($scope) {

            $scope.$on("to-child", function(e,data){
             console.log("child level:"+data);
            });

            $scope.$on("to-parent", function(e,data){
             console.log("child level:"+data);
            });
        });
        
        var Bcontroller = app.controller('BroCtrl', function ($scope) {

            $scope.$on("to-child", function(e,data){
             console.log("brother level:"+data);
            });

            $scope.$on("to-parent", function(e,data){
             console.log("brother level:"+data);
            });
        });
       

    </script>


</body>

</html>

运行结果：

child level:childData
parent level:parentData