$apply和$watch的用法

 今天看到了$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 代码


{{message}}

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代码

姓名: 年龄:

{{full}}

JS代码

  app.controller('myCtrl_2', function($scope){
     $scope.name='';
     $scope.age='';
     $scope.$watch('name',function(){
       $scope.full=$scope.name+' '+$scope.age;
     });
});

2、监测对象变化
Html 代码

{{obj}}

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 代码

{{fun}}

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方法的理解,可能有些不足和问题,希望大家能够多多指出,谢谢啦!

你可能感兴趣的:($apply和$watch的用法)