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

最新推荐文章于 2024-04-27 04:58:55 发布

原创最新推荐文章于 2024-04-27 04:58:55 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #scope #作用域

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了AngularJS中作用域(scope)的事件路由，包括如何使用$emit()从子作用域向上广播事件到父作用域，以及如何通过$broadcast()从父作用域向下广播事件到所有子作用域。同时，提到了在事件处理中，data参数用于传递数据，以及event事件对象提供的如event.name、event.targetScope等属性和方法，这些可用于获取事件信息和控制事件行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>