AngularJS中的$apply方法

最新推荐文章于 2018-07-01 20:48:00 发布
最新推荐文章于 2018-07-01 20:48:00 发布
阅读量125 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/516849
版权

  现在我想在页面上显示一个变量i，i的初始值是0，我希望通过controller每1秒给i加1，使得在页面上i从0，1，2，3，4……一直增长，我会这么做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< script  type = "text/javascript" >
     /**
      * Module
      *
      * Description
      */
     angular.module('app', []).controller('firstController',
         function($scope) {
             $scope.i = 0;
             setInterval(function() {
                 $scope.i++;
             }, 1000);
         });
</ script >

    然而这样是没用的，因为i虽然变了，但是没人通知view，页面上的i还是0，不会增长。需要用到apply方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< script  type = "text/javascript" >
     /**
      * Module
      *
      * Description
      */
     angular.module('app', []).controller('firstController',
         function($scope) {
             $scope.i = 0;
             setInterval(function() {
                 $scope.$apply(function() {
                     $scope.i++;
                 });
             }, 1000);
         });
</ script >

       Angular知道变量改变是通过脏检查实现的，脏检查就是将原对象复制一份快照，在某个时间，比较现在对象和快照的值，如果不一样就是发生了变化。Angular不会脏检查所有对象，当对象被绑定到html中，这个对象才被添加为检查对象。也不会检查所有属性，当属性被绑定时，才会列为检查的属性。

       所有ng开头的事件执行时，都会触发脏检查。而这里自己写的firstController中每次循环执行函数结束后，显然没有触发脏检查。$apply方法就是手动触发脏检查，$apply仅仅是进入angular context，然后通过$digest去触发脏检查。$digest方法负责所属的scope和子scope的脏检查，脏检查又会触发$watch方法。

      $apply()的定义为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$apply:  function (expr) {
         try  {
           beginPhase( '$apply' );
           return  this .$eval(expr);
         }  catch  (e) {
           $exceptionHandler(e);
         } finally {
           clearPhase();
           try  {
             $rootScope.$digest();
           }  catch  (e) {
             $exceptionHandler(e);
             throw  e;
           }
         }
       }

   在$digest执行时，如果watch观察到的value和上次的不一样，就会触发$watch方法。

      $watch(watchExp,watchAction,deepWatch)

      watchExp指明要监听的对象，如果watchExp变了，就会执行watchAction，deepWatch得举个例子解释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html  ng-app = "app" >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body >
     < div  ng-controller = "firstController" >
         < p  ng-bind = "i" ></ p >
         < input  type = "text"  ng-model = "abc['name']" >
         < input  type = "text"  ng-model = "abc['age']" >
     </ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', []).controller('firstController',
         function($scope) {
             $scope.i = 0;
             $scope.abc={
                 'name':'Pomelo',
                 'age':21
             }
             $scope.$watch('abc',function(newValue,oldValue){
                 $scope.i++;
             },true);
         });
     </ script >
</ body >
 
</ html >

  在watchExp是个数组时，deepWatch设置为true，只要这里abc中的name或者age变了，都算数组abc变化，如果deepWatch设置为false，改变name或者age，abc都没有变，不会执行watchAcion。上面这段代码是只要name或者age改变，i就自增1。

      










本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1658475，如需转载请自行联系原作者
weixin_34259559
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angularjs中的$apply及优化使用详解
12-09
前言 对于一个在前端属于纯新手的我来说，Javascript都还是一知半解，要想直接上手angular JS，遇到的阻力还真是不少。不过我相信，只要下功夫，即使是反人类的设计也不是什么大的问题。 今天，我们要聊得是Angularjs中的小明星$apply。当我们数据更新了，但是view层却没反应时，总能听到有人说，用apply吧，然后，懵懂无知的我们，在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢，真的更新了。 然而，有些时候，编译器会无情的给你返回 Error: $digest already in progress 那么，导致这些现象的原因时什么的呢？$a
AngularJS中$apply方法和$watch方法用法总结
11-27
本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考，具体如下： 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化，当时小编对这个方法不是很了解，所以在网上...
Angularjs的$apply及其优化使用
weixin_34082789的博客
07-01 185
今天，我们要聊得是Angularjs中的小明星$apply。当我们数据更新了，但是view层却没反应时，总能听到有人说，用apply吧，然后，懵懂无知的我们，在赋值代码后面加了$scope.$apply(),然后就惊喜的发现。噢，真的更新了。 然而，有些时候，编译器会无情的给你返回 Error: $digest already in progress 那...
AngularJS中$apply
weixin_30561425的博客
05-11 120
$apply是$scope下的特性，传播model的变化。下面的例子两秒之后控制台会显示出已经更新的model, 然而, view 并没有更新。$digest循环不会只运行一次。在当前的一次循环结束后，它会在执行一次循环用来检查是否有model发生了变化。$digest循环会持续知道model不再发生变化。所以不要在监听中使用脏循环。$digest循环最少也会运行两次。 /*** * 关...
angularJS中$apply()方法详解
lvjianyu2007的专栏
09-07 984
http://www.jb51.net/article/59538.htm 这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说，Javascript都还是一知半解，要想直接上手angular JS，遇到的阻力还真是不少。不过我相信，只要下功夫，即使是反人类的设计也不是什么大的问题。      Ok
angularjs 中$apply，$digest，$watch详解
10-21
在AngularJS中，$apply，$digest和$watch是核心的脏检查机制，它们共同确保了模型和视图之间的同步。下面将详细解释这三个概念及其工作原理。 1. **$apply (通知)** `$apply`是AngularJS提供的一个方法，它的主要...
AngularJS报错$apply already in progress的解决方法分析
01-19
本文实例分析了AngularJS报错$apply already in progress的解决方法。分享给大家供大家参考，具体如下： 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest()，我们很可能会遇到类似下面的错误，虽然这...
angularJS之$apply()方法
doushen1的专栏
02-25 866
这几天，根据buddy指定的任务，要分享一点angular JS的东西。对于一个在前端属于纯新手的我来说，Javascript都还是一知半解，要想直接上手angular JS，遇到的阻力还真是不少。不过我相信，只要下功夫，即使是反人类的设计也不是什么大的问题。      Okay，废话不多说。为了弄明白angular JS为何物，我先是从Scope开始。那么什么是Scope呢？借用官方文档的一段
angularJS中的$apply(),$digest(),$watch()
weixin_30606461的博客
08-09 274
$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。而为了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。 $apply()和$digest() AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding)，这个特性大大简化了我们的代码编写方式。数据...
angular $apply方法
现在学习也不晚
12-01 1146
$apply  方法 作用： Scope 提供$apply 方法传播 Model 的变化 $apply  方法 使用情景 ： AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（模型、视图等），$apply 就是用来做这件事情的
angularJS学习小结——$apply方法和$watch方法
热门推荐
Jack 架构师之路
05-09 1万+
引言    最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化，当时小编对这个方法不是很了 解，所以在网上找了一些资料来学习一下，下面小编就给大家简单介绍一些angularJS中Scope 提供$apply 方法传播 Model 的变化和$watch方法监听module变化。    $apply使用情景   Angula
Angularjs $scope 里面的$apply方法
Inuyasha1121的专栏
04-07 1707
$apply 方法作用：Scope 提供$apply 方法传播 Model 的变化$apply 方法使用情景：AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（模型、视图等），$apply 就是用来做这件事情的。$apply 方法注意事项：...
angular $apply
ddfs2014的博客
09-03 228
Javascript按轮次执行 Javascript代码是按轮次执行的，从第一行开始一直到最后一行依次执行，正常情况下中间不会被中断，在代码执行的过程中浏览器不会有任何响应。 不过任何异步回调，用户的输入操作等会新起一轮，新起的一轮会加入到事件轮询队列，直到下个CPU空闲会被执行。 怎么实现双向数据 一般来说有两种比较流行的方法： 1.使用自定义的对象，这个对象的数据的更新需要用到自定义...
Angularjs $scope 里面的$apply 方法 和 $watch 方法
二次猿的博客
11-12 466
Angularjs scope里面的scope 里面的apply 方法 和 watch方法学习要点：
《AngularJS》----$apply 与 $watch
zhoukun@Fly
06-27 3782
在AngularJS的一些项目中，我们经常用到$apply 与 $watch ，这两个对象，这另个对象都依赖于$scope对象，其中，$apply应用与传播modle的变化，而$watch是用来监测model的变化，这与AngularJS中的双向数据绑定有很大的关系，下面我们探讨一下这两个对象的基本用法。      1、$apply  方法 作用：            Scope 提供$ap
AngularJS基础——$scope里的$apply方法和$watch方法
bboyjoe的博客
12-30 2956
$apply()的作用是传播Model的变化； 下面用一个定时刷新来示例： Angular基础 {{name}} {{age}} var myApp=angular.module('myApp',[]); myApp.controller('firstCtrl',function($scope,$timeo
Angularjs $scope 里面的$apply方法 和 $watch方法
Christine95的博客
10-17 5499
1. Angularjs $scope 里面的$apply 方法 $apply 方法作用： Scope 提供$apply 方法传播 Model 的变化 $apply 方法使用情景： AngularJS 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（
深入理解AngularJS：$scope在MVC架构中的关键角色
在AngularJS中，Model-View-Controller (MVC) 模式是架构应用程序的一种核心概念，它将复杂的数据处理逻辑与用户界面分离，提高代码的可维护性和可扩展性。MVC的核心在于"$scope"对象，它是AngularJS应用程序的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值