$on、$emit、$broadcast用法 

<!DOCTYPE html>
<html ng-app="firstApp">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                border: 1px solid #ff7300;
                padding: 20px;
                margin: 10px;
                border-radius: 5px;
            }
        </style>
        <script src="js/angular1.5.11/angular.js"></script>
    </head>

    <body>
        <div ng-controller="ParentController">
            <!--父级-->
            <div ng-click="clkP()">click--给child</div>
            <div ng-controller="OneSelfController">
                <!--自己-->
                <span ng-click="clkme()">click me</span>
                <div ng-controller="ChildController">
                    它是OneSelfController的子级
                </div>
                <!--子级-->
            </div>
            <div ng-controller="siblingsController">
                它与OneSelfController是平级
            </div>
            <!--平级-->
        </div>

        <script>
            var app = angular.module('firstApp', []); //app模块名
            app.controller('OneSelfController', function($scope) {
                $scope.clkme = function() {
                    $scope.$broadcast('sendChild', '我给子控制器传递数据');
                    $scope.$emit('sendParent', '冒泡到父元素')
                }
            })
            .controller('ParentController', function($scope) {
                $scope.$on('sendParent', function(event, data) { //监听在子控制器中定义的 sendParent 事件
                    console.log('OneSelfController传过来的', data, event.name, event); //事件名称：sendParent
                });
                $scope.clkP = function() {
                    $scope.$broadcast('sendAllChild', '让siblingsController接收到');
                }

            })
            .controller('ChildController', function($scope) {
                $scope.$on('sendChild', function(event, data) { //监听在子控制器中定义的 sendChild 事件
                    console.log('ChildCtrl', data, event.name, event); // 事件名称：sendChild
                });
            })
            .controller('siblingsController', function($scope) {
                $scope.$on('sendAllChild', function(event, data) {
                    console.log('值过来吧', data);
                });
                //下面事件不会触发
                $scope.$on('sendParent', function(event, data) {
                    console.log('平级得不到值', data);
                });
                $scope.$on('sendChild', function(event, data) {
                    console.log('平级得不到值', data);
                });
            });
        </script>
    </body>

</html>

 

posted @ 2017-12-27 11:29  老siji  阅读(259)  评论(0)    收藏  举报