美文网首页@IT·互联网
$apply和$watch的用法

$apply和$watch的用法

作者: 赵碧菡 | 来源:发表于2017-05-07 21:06 被阅读0次

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

相关文章

  • $apply和$watch的用法

    今天看到了$apply方法,就有点不明白为什么AngularJS中有$timeout、$interval等方法有时...

  • js apply和call

    apply和call apply的实例 apply的用法 apply方法:语法:apply([thisObj[,a...

  • call、apply、bind 作用和区别

    一、call、apply、bind 的作用 call的用法 apply的用法 bind的用法 二、call、app...

  • apply和call用法

    apply和call用法 [程序员每日5分钟]轻松搞定 JS 的this、call和apply

  • this_原型链_继承

    this相关问题 apply、call 、bind的作用以及区别 call、apply和bind方法的用法以及区别...

  • vue watch用法

    vue watch用法

  • Vue中watch的详细用法

    在Vue中,使用watch来响应数据的变化。watch的用法大致有下面三种: 1. 基本用法 下面代码是watch...

  • Vue中watch的详细用法

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:''...

  • 面向对象继承中call和apply

    .apply()用法和call()的区别 Js apply方法详解我在一开始看到javascript的函数appl...

  • vue watch基础用法

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法: 直...

网友评论

    本文标题:$apply和$watch的用法

    本文链接:https://www.haomeiwen.com/subject/rcdptxtx.html