Angular之作用域

前端之家收集整理的这篇文章主要介绍了Angular之作用域前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 作用域的特点

1.1 具体来说,作用域包括以下3个比较显著特点:

  1. 提供了一个$watch方法来监听数据模型的变化,ng-model的双向绑定,就是由其支撑。
  2. 提供了$apply方法,为各种类型的数据模型改变提供支撑,例如,通过在页面视图中的ng-click指令,执行控制器中的代码
  3. 提供了执行的环境,一个表达式必须在拥有该表达式属性的作用域中执行才更合适,作用域通过$scope对象,使所有的表达式都拥有对应的执行环境,也就是执行上下文。

1.2 $watch的使用

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
<div ng-controller='myController'> <div> <input type="text" ng-model='name' /> </div> <div>累计变化次数{{count}}</div> </div> <script type="text/javascript"> var app=angular.module('myapp',[]); app.controller('myController',['$scope',function($scope){ $scope.count=0; $scope.name=''; $scope.$watch('name',function(){ $scope.count++; }) }]) </script>

  $watch方法$scope中的name属性进行监视,当该属性发生变化时,将count属性值累加1.
  其具体原因在于,每次对已绑定ng-model指令的name进行修改时,内部的$digest方法就会自动运行一次,检测name属性是否与上次$digest运行时的内容保持一直,如果不一致,则执行$watch绑定的函数

2. 作用域的层级

顶级作用域只有一个,下面的子作用域可以存在多个,子作用域可以继承父作用域的全部属性方法,同级子作用域间不可互相访问各自的属性方法

  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • <div ng-controller="parentController"> <ul ng-controller="childfirstController"> <li>{{childFirst}}</li> </ul> <ul ng-controller="childsecondController"> {{childFirst}} </ul> </div> <div ng-controller='myController'> <div> <input type="text" ng-model='name' /> </div> <div>累计变化次数{{count}}</div> </div>

    parentController是父级控制器,childfirstControllerchildsecondController是子级控制器,子级控制器可以直接继承父级控制器作用域中通过$scope添加属性方法,如果父级控制器又通过$rootScope添加属性方法,那么子级作用域将首先访问$scope,如果没有找打结果,然后继续向上再访问$rootScope

    3. 作用域的事件

    有两种方式可以实现作用域之间的通信;

    1. 服务
    2. 事件

      要使用事件,必须调用Angular中提供的两个方法$broadcast$emit
    其中,$broadcast功能是将事件从父级作用域传播至子级作用域,调用方式如下:
      $broadcast(evventname,data)

      而$emit功能则正好相反,是将事件从子级作用域传播至父级作用域,调用方式如下:
      $emit(eventname,105)">   使用$on方法来在作用域中监控传播来的事件并获取相应的数据,调用方式如下:

      
      
  • 1
  • 2
  • 3
  • $on(eventname,function(event,data){ //处理传播事件的代码 })
    • $emit只能向parent controller传递event与data
    • $broadcast只能向child controller传递event与data
    • $on用于接收event与data
    • e@H_407_403@mit broadcast可以传多个参数,$on也可以接收多个参数。

    其中,eventname为需要监控的传播事件名称event为时间传播过程中自带的特征,该特征包括以下几个重要的属性

    属性名称 功能说明
    event.targetScope@H_301_450@ 返回发出或者传播原始事件的作用域名称@H_301_450@
    event.currentScope@H_301_450@ 返回正在接收传播事件的作用域名称@H_301_450@
    event.name@H_301_450@ 传播事件的名称@H_301_450@
    event.stopPropagation@H_301_450@ 防止事件进行冒泡操作的函数(这只适用于使用$emit发出的事件)@H_301_450@
    event.preventDefault@H_301_450@ 阻止代码事件的发生@H_301_450@
    event.defaultPrevented@H_301_450@ 阻如果调用preventDefault,则为true,否则为false@H_301_450@

    转自:http://lib.csdn.net/article/angularjs/50277

    原文链接:https://www.f2er.com/angularjs/147521.html

    猜你在找的Angularjs相关文章