（12）AngularJS 1.X 之$watch和$apply方法

最新推荐文章于 2019-10-12 09:55:33 发布

GISer.Wang

最新推荐文章于 2019-10-12 09:55:33 发布

阅读量747

点赞数 1

分类专栏： angularjs1.X 文章标签： angularjs

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/54948137

版权

angularjs1.X 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

引言
watch和apply方法
- 1 watch对象的创建
- 1 apply方法实现双向绑定

1.引言

在本篇博客中主要介绍一下AngularJS中的数据双向绑定，我们是否有过这个疑问：为什么我们使用ng-model命令可以实现双向绑定呢？在以前的博客中我们说过有一个$watch队列的概念，只要在页面绑定一个变量就会生成一个$watch对象，然后将该对象放入到$watch队列中，然后我们使用ng-model命令时，AngularJS会自动调用$apply方法，该方法会启动$digest循环，然后该循环会遍历$watch队列，从而更新UI，形成双向绑定的效果。

关于上面的过程有两个而难题：

问题一：$watch对象是自动创建的
问题二：$apply方法是自动调用的

接下来我们就来看看入门手动调用这两个东西。

2.`$watch`和`$apply`方法

2.1 `$watch`对象的创建

首先我们看一下下面的代码：

app.controller('MainCtrl', function($scope) {
  $scope.foo = "Foo";
  $scope.world = "World";
});

Hello, {{ world}}

上面的代码会自动生成一个$watch对象，也就是说，只有world变量生成了$watch对象，但是foo没有生成$watch对象,从上面的例子将变量绑定在UI上面，会自动生成$watch对象，没有绑定的foo变量将不会生成，这个过程都是自动的。

接下来我们使用$watch方法手动检测foo的改变。代码如下：（注意：我们检测'foo'字符串变量）

<html ng-app="myApp">
<head>
    <script src="js/angular.js"></script>
    <meta charset="utf-8">
    <script>
        var app = angular.module('myApp',[]);
        app.controller('MainCtrl', function($scope) {
            $scope.foo = "Foo";
            $scope.world = "World";
            $scope.change= function () {
                $scope.foo="new Foo";
            }
            //注意这里：变量为："foo"
            $scope.$watch('foo',function (newValue,oldValue) {
                //其中：newValue是新值
                //oldValue为旧值
                //通过 $scope.$watch方法会给foo变量创建相应的$watch对象，然后可以检测改变量的改变
                console.log(newValue);
                console.log(oldValue);

            })
        });
    </script>
</head>
<body>
    <div ng-controller="MainCtrl">
        <button ng-click="change();">改变Foo变量的值</button>
    </div>
</body>
</html>

运行结果

这里写图片描述

2.1 `$apply`方法实现双向绑定

我们看下面的这个例子：

控制器代码

        var app = angular.module('myApp',[]);
        app.controller('MainCtrl', function($scope) {
            $scope.num = 0;
            setInterval(function () {
                $scope.num++
            },1000);
        });

html模板

 <div ng-controller="MainCtrl">
        {{num}}
    </div>

代码是没有问题的，每隔一秒中num变量就会加1，但是这并没有实时更新到UI上面，这是因为，虽然num的值修改了，但是并没有启动$digest循环，所以没有实时更新，如何启动$digest循环？答案是$apply方法，接下来我们就是用$apply方法实现数据的实时更新。

        var app = angular.module('myApp',[]);
        app.controller('MainCtrl', function($scope,$interval) {
            $scope.num = 0;
            setInterval(function () {
                //这里会启动$digest循环，实时更新
                $scope.$apply(function () {
                    $scope.num++
                })
            },1000);
        });

GISer.Wang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（12）AngularJS 1.X 之$watch和$apply方法

引言watch和apply方法1 watch对象的创建1 apply方法实现双向绑定1.引言在本篇博客中主要介绍一下AngularJS中的数据双向绑定，我们是否有过这个疑问：为什么我们使用ng-model命令可以实现双向绑定呢？在以前的博客中我们说过有一个$watch队列的概念，只要在页面绑定一个变量就会生成一个$watch对象，然后将该对象放入到$watch队列中，然后我们使用n
复制链接

扫一扫