AngularJS作用域层级和事件
作用域层级
作用域也是拥有自己的层级的,并且与DOM的树状结构相辅相成,他的顶级作用域只有一个,而下面的子集作用域可以创建多个,自己作用域可以继承父级作用域中全部属性和方法,但同级别自己作用域之间却不可以互相访问各自的属性和方法。
作用域事件的传播
作用域存在层级关系,最顶层的就是rootscope作用域,其余都是在它的基础上进行分支和嵌套的。在这种关系的作用域,它们之间的数据通信变得相对复杂,概括来说有两种方式可以实现作用域之间的通信。
服务(service)
事件(event)
通过事件进行两个作用域间的事件进行通信,而要使用事件,则必须调用ng中提供的两个方法 emitted方法。
$broadcasted
将事件从父级作用域传播至子级作用域。
$broadcast(eventname,data)
参数eventname是定义的事件,data是事件传播过程中携带的数据信息。
$emitted
将事件从从子级作用域传播至父级作用域。
$emitted(eventname,data)
$on
除了以上的两个传播方法之外,还需要通过调用$on方法,在作用域中监控传播来的事件获取相应的数据
$on(eventname,function(event,data){ //接收传播 })
代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>匹配方式过滤</title> <script src="components/angular/angular.min.js"></script> <style> </style> </head> <body ng-app="a3_9"> <div ng-controller="c3_9_p"> <div ng-controller="c3_9_s"> <button ng-click="to_parent()">to_parent</button> <button ng-click="to_child()">to_child</button> <div ng-controller="c3_9_c"></div> </div> <div ng-controller="c3_9_b"></div> </div> <script> var a3_9 = angular.module('a3_9',[]); a3_9.controller('c3_9_s',['$scope',function($scope){ $scope.to_parent = function(){ $scope.$emit('event_1','child_to_parent'); } $scope.to_child = function(){ $scope.$broadcast('event_2','parent_to_child'); } }]); a3_9.controller('c3_9_p',['$scope',function($scope){ $scope.$on('event_1',function(event,data){ console.log('在p父级中监听到',data); }); $scope.$on('event_2',function(event,data){ console.log('在p父级中监听到',data); }); }]); a3_9.controller('c3_9_c',['$scope',function($scope){ $scope.$on('event_1',function(event,data){ console.log('c在子级中监听到',data); }); $scope.$on('event_2',function(event,data){ console.log('c在子级中监听到',data); }); }]); a3_9.controller('c3_9_b',['$scope',function($scope){ $scope.$on('event_1',function(event,data){ console.log('b在同级中监听到',data); }); $scope.$on('event_2',function(event,data){ console.log('b在同级中监听到',data); }); }]); </script> </body> </html>
输出结果:
在p父级中监听到 child_to_parent 在子级中监听到 parent_to_child