今天看到了$apply方法,就有点不明白为什么AngularJS中有$timeout、$interval等方法有时候还需要手动调用$apply方法?什么时候需要调用$apply方法?然后就查了一下资料。
首先,$apply是更新绑定的model到view上,传播model的变化,那什么时候需要要我们手动调用$apply方法呢?例如当我们使用第三方插件(比如JQuery)、setTimeout()这时就需要我们手动调用,因为AngularJS不会察觉AngularJS上下文之外的事件变化。像AngularJS中提供的ng-click、http的回调函数、$timeout、$interval方法内部已经把$apply方法封装好了,不需要我们自己调用,在$apply方法中调用$apply方法会抛出错误,$apply()方法可以在angular框架之外执行angular JS的表达式。
Html 代码
<div ng-controller="myCtrl">
<p>{{message}}</p>
</div>
JS代码
var app=angular.module('myApp',[]);
/*$apply*/
app.controller('myCtrl',function($scope){
$scope.message="Hello";
//这样是看不到view的变化的,是因为无法传播model
setTimeout(function(){
$scope.message="Hello World";
},2000);
// 用apply方法包起来,就可以看到view的变化了
setTimeout(function(){
$scope.$apply(function(){
$scope.message="Hello World";
)}
},2000);
$watch 监测model的变化,可以监听某个变量,对象中的某个属性,函数。
1、监测变量的变化
Html代码
<div ng-controller="myCtrl_2">
姓名:<input type="text" ng-model="name">
年龄:<input type="text" ng-model="age">
<p>{{full}}</p>
</div>
JS代码
app.controller('myCtrl_2', function($scope){
$scope.name='';
$scope.age='';
$scope.$watch('name',function(){
$scope.full=$scope.name+' '+$scope.age;
});
});
2、监测对象变化
Html 代码
<div ng-controller="myCtrl_obj">
{{obj}}
</div>
JS代码
app.controller('myCtrl_obj',function($scope,$interval){
$scope.data={
'num':1
}
//改变对象属性的值
$interval(function(){
$scope.data.num++;
},2000);
$scope.$watch('data.num',function(value){
$scope.obj=value;
});
});
3、监测函数变化
Html 代码
<div ng-controller="myCtrl_fun">
{{fun}}
</div>
JS代码
app.controller('myCtrl_fun',function($scope,$interval){
$scope.data={
'num1':1,
'num2':2
}
$interval(function(){
$scope.data.num1++;
},2000);
//创建一个函数
$scope.myFun=function(){
return $scope.data.num1*$scope.data.num2;
}
$scope.$watch($scope.myFun,function(value){
$scope.fun=value;
});
});
这是自己对于$apply和$watch方法的理解,可能有些不足和问题,希望大家能够多多指出,谢谢啦!
网友评论