AngularJS学习笔记三 作用域

本文详细介绍了AngularJS作用域的概念及其工作原理,包括作用域的创建、原型继承、父子作用域的关系、属性监听方法$watch及$watchCollection的使用、$apply与$digest循环的作用、作用域事件的路由与广播等。
摘要由CSDN通过智能技术生成

 1.  AngularJS作用域  

    AngularJS作用域本质上就是一个普通的JavaScript对象,和普通的JavaScript对象一样,都可以在作用域中增加属性或者方法,不同的是我们不需要手动去构建作用域对象。

    AngularJS程序中作用域的主要功能是存放模型数据,在控制器中,我们可以修改作用域中的模型数据或者在作用域中增加新的模型数据,然后在视图中通过AngularJS表达式来展示模板数据。

    当AngularJS启动时会自动创建一个根作用域对象$rootScope,接着当我们使用ng-controller指令实例化控制器对象时,会创建一个子作用域。默认情况下,该子作用域会继承根作用域中的所有属性。

2.AngularJS作用域对象原型继承

    AngularJS作用域对象继承采用构造方法原型链继承。AngularJS作用域的构造方法中提供了一个$new()成员方法,用于创建子作用域。

    var parent = $rootScope;

    var child = parent.$new();

3.在AngularJS控制器中可以嵌套另外一个控制器。

4.AngularJS提供了$watch()方法,可以监视作用域中属性的变化。

    $watch()方法可以接收3个参数。第一个参数是需要监听的属性,第二个参数是在监听属性发生变化时需要回调的方法,第三个参数用于“引用监视”。当不显示指明第三个参数或者将其设置为false时,只要监视的对象引用没有发生变化,就不算它发生变化(监视对象元素属性发生变化不算发生变化)。将第三个参数设置为true时,叫做“全等监视”。

    $watchCollection():发生数组的项目增减时做出反应。

5.作用域监视解除

    $watch()方法调用完毕后返回另一个方法,调用这个返回的方法就能够解除作用域监视。

6.$apply方法与$digest循环

    当我们写下AngularJS表达式的时候,AngularJS框架会在幕后为我们在$scope中设置一个watcher,用来在数据发生变化时更新view。这里的watcher和我们手动调用$watch方法添加watcher时一样的。

    AngularJS会周期性地运行一个函数来检查$scope模型中的数据是否发生了变化,这就是所谓的$digest循环,在$digest循环中,watcher会被触发。当一个watcher被触发时就会检查相应的数据是否发生了变化。若发生了变化则会调用相应的回调方法。

    调用了$scope.$digest()后,$digest循环就开始了。当scope中的数据发生变化时,AngularJS会自动地通过调用$digest()来触发一轮$digest循环。

    注意:AngularJS可以不直接调用$digest()方法,而是调用$scope.apply(),后者会调用$rootScope.$digest()。因此,一轮$digest循环在rootScope开始,随后会访问所有作用域中的watcher。

    setTimeout()和setInterval()两个方法都需要我们手动调用$apply()方法来触发$digest循环。$timeOut与$interval两个服务可以代替上面两个方法,而且会自动进行$digest循环。$apply()方法接收一个方法作为参数,将需要触发的代码放到这个参数方法中。

7.作用域事件路由与广播

    $emit()方法:实现事件从子作用域路由到父作用域中。$scope.$emit(“事件名”,参数列表);

    $broadcast()方法:用于向子作用域中广播事件;

    $on()方法:用于注册一个事件监听器。$scope.$on(“事件名”,function(event,data){});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值