AngularJS作用域层级和事件

最新推荐文章于 2020-03-31 14:03:19 发布

原创最新推荐文章于 2020-03-31 14:03:19 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJs #作用域

AngularJS 1.x版本学习专栏收录该内容

10 篇文章

订阅专栏

本文介绍了AngularJS中的作用域层级结构及其与DOM树的关系，并详细解释了如何利用事件（$broadcast 和 $emit）在不同层级的作用域间进行通信。

AngularJS作用域层级和事件

作用域层级

作用域也是拥有自己的层级的，并且与DOM的树状结构相辅相成，他的顶级作用域只有一个，而下面的子集作用域可以创建多个，自己作用域可以继承父级作用域中全部属性和方法，但同级别自己作用域之间却不可以互相访问各自的属性和方法。
作用域事件的传播

作用域存在层级关系，最顶层的就是rootscope作用域，其余都是在它的基础上进行分支和嵌套的。在这种关系的作用域，它们之间的数据通信变得相对复杂，概括来说有两种方式可以实现作用域之间的通信。
- 服务（service）
- 事件（event）
通过事件进行两个作用域间的事件进行通信，而要使用事件，则必须调用ng中提供的两个方法 $和broadcasted和$ 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