欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS作用域知识点讲解

程序员文章站 2022-06-14 12:22:08
1. angularjs作用域 angularjs作用域本质上就是一个普通的javascript对象,和普通的javascript对象一样,都可以在作用域中增加属性或者方法,不同...

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){});