AngualrJS会自动调用$scope.$watch函数

当前位置: mg游戏平台下载 > mg4355线路检测手机版 >

AngularJS $scope里面包车型客车$watch是AngularJS的为主函数,学习AngularJS必得清楚那多少个函数。

在绑定$scope中的变量到view的时候,AngularJS自动在里边创建贰个"Watch"。"Watch"用于监听AngularJS scope中变量的更改。能够因而调用$scope.$watch(State of Qatar那几个点子来创设"沃特ch"。

$scope.$digest(卡塔尔国函数会循环访问具有的watches,并检查评定其所监听的$scope中的变量是或不是改进。要是变量爆发退换,会调用该变量对应的监听函数。监听函数能够完成广大操作,例如让html里面包车型地铁text文本显示最新的变量值。可以预知,$scope.$digest是足以触发多少绑定更新的。

大部情形下,AngualrJS会自动调用$scope.$watch函数,但是在有些境况下,我们须求手动调用他们,由此,有须要领悟他们是怎么专门的学业的。

$scope.$apply(卡塔尔(قطر‎那个函数会先推行一些代码,之后在调用$scope.$digest(卡塔尔国。全数的watches会被检验一遍,相应的监听函数也会被实施。$scope.$apply(卡塔尔(قطر‎在AngularJS与别的javascript代码集成时是很有用的。

接下去大家具体的授课下$watch 和 $apply(卡塔尔(قطر‎。

$watch()$watch(watchExpression, listener, [objectEquality])

watchExpression:监听目的,能够是string或然function{}

listener:监听指标发生改造时进行的回调函数function{}

objectEquality:是还是不是深度监听,假如设置为true,它报告Angular检查所监督的对象中每贰特性质的成形。假如您期待监察和控制数组的分别元素恐怕指标的习性并非多少个惯常的值, 那么您应该选用它。

$digest()检查评定当前scope以致子scope中保有的watches,因为监听函数会在实施进程中期维改良model会一向被调用直到model未有再变。当调用超过10遍时,$digest(卡塔尔会抛出一个特别"Maximum iteration limit exceeded',以此来防护程序步向二个死循环。

$apply()$apply

exp:string或者function{}

$apply(卡塔尔生命周期伪代码暗中表示图如下

function $apply { try { return $eval { $exceptionHandler; } finally { $root.$digest(); }}

Example上边大家通过贰个例证来评释$watch,$digest和$apply。

var module = angular.module;var myController1 = module.controller("myController", function { $scope.data = { time : new Date() }; $scope.updateTime = function() { $scope.data.time = new Date(); } document.getElementById .addEventListener { console.log("update time clicked"); $scope.data.time = new Date; {{data.time}} 
 update time - ng-click update time

这段代码会绑定$scope.data.time到HTML中显得出来,同时那一个绑定会活动创制三个watch来监听$scope.date.time的变动。此外,这里还应该有2个开关,第三个开关是由此ng-click Directive来调用$scope.updateTime方法,之后AngularJS会自动试行$scope.$digest(卡塔尔使新型的年华展现到HTML中。第三个开关是经过javascript代码增添贰个点击事件,以此来更新HTML中的时间。不过第三个按键是不可能干活的,它的消除办法是在点击事件的末尾手动的去调用$scope.$digest(卡塔尔方法,如下:

document.getElementById .addEventListener { console.log("update time clicked"); $scope.data.time = new Date;});

除此以外两个解决办法是调用$scope.$apply(State of Qatar,如下:

document.getElementById .addEventListener { $scope.$apply{ console.log("update time clicked"); $scope.data.time = new Date;

以上就是本文的全体内容,希望对大家的学习抱有利于。

上一篇:就是单独移动每个li时 下一篇:没有了