AngularJS作用域$scope事件路由与广播

来源：互联网发布：大数据安全建设编辑：程序博客网时间：2024/06/05 07:23

AngularJS作用域支持两种事件传播方式：

事件从子作用域路由到父作用域——$emit()
事件从父作用域广播到所有子作用域——$broadcast()

$on()用于注册监听

$scope.$on("infoEvent",function(event,data){ });

data为调用$emit()或$broadcast()方法获得的数据
event事件对象具有一些实用的属性和方法，能够通过它获取更多关于事件的信息：event.name、event.targetScope、event.currentScope、event.stopPropagation()、event.preventDefault()、event.defaultPrevented

$emit()

<!doctype html><html ng-app="eventModule"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="../angular-1.5.5/angular.js">    </script>    <style>        #parent{            width: 350px;            height: 250px;            border: 3px solid #ccc;        }        #child{            width: 300px;            height: 200px;            border: 3px solid #ccc;            margin: 10px auto;        }    </style></head><body>     <div id="parent" ng-controller="ParentController"><!--父级作用域-->        父作用域        <div id="child" ng-controller="ChildController"><!--子级作用域-->            子作用域            <button ng-click="postEvent()">Emit</button>        </div>    </div>    <script>        var app = angular.module('eventModule',[])        app.controller('ParentController',            function($scope) {                $scope.$on("infoEvent",function(event,data){                    console.log("接收到子作用域事件...");                    console.log(data);                });            });        app.controller('ChildController',            function($scope) {                $scope.postEvent = function(){                    $scope.$emit("infoEvent",{name:"Jane",age:23});                }            });    </script></body></html>

$broadcast()

<!doctype html><html ng-app="eventModule"><head>    <meta charset="UTF-8">    <script type="text/javascript" src="../angular-1.5.5/angular.js">    </script>    <style>        #parent{            width: 450px;            height: 250px;            border: 3px solid #ccc;        }        .child{            width: 150px;            height: 200px;            border: 3px solid #ccc;            float: left;            margin-left: 20px;        }    </style></head><body>     <div id="parent" ng-controller="ParentController"><!--父级作用域-->        <div>父作用域        <button ng-click="postEvent()">Broadcast</button>        </div>        <div class="child" ng-controller="Child1Controller"><!--子级作用域-->            子作用域1        </div>        <div class="child" ng-controller="Child2Controller"><!--子级作用域-->            子作用域2        </div>    </div>    <script>        var app = angular.module('eventModule',[])        app.controller('ParentController',            function($scope) {                $scope.postEvent = function() {                    $scope.$broadcast("infoEvent",{name:"Jane",age:23});                }            });        app.controller('Child1Controller',            function($scope) {                $scope.$on("infoEvent",function(event,data){                    console.log("子作用域1接收到父作用域广播事件...");                    console.log(data);                });            });        app.controller('Child2Controller',            function($scope) {                $scope.$on("infoEvent",function(event,data){                    console.log("子作用域2接收到父作用域广播事件...");                    console.log(data);                });            });    </script></body></html>

阅读全文

0 0