使用angularjs1.x构建前台开发框架（十一）——数据双向绑定

angularjs中有两个非常重要的概念，一个就是本章要介绍的数据双向绑定，另一个则是从后端延伸过来的依赖注入。那么何为数据双向绑定呢？顾名思义，即元数据（model）和视图（view）展示的数据存在绑定关系，当元数据中的信息发生变化时，视图中的数据会实时变化，反之亦然。

首先我们来看一个视图数据变更映射到元数据中的例子：

首先在controller中定义一个变量data，然后在页面上定义的输入框绑定这个变量，接下来在输入框中改变这个变量的值，最后通过在controller中定义的定时器来查看变量是否随着视图中的变更而变化。

在c2.js中定义变量以及定时器：

/**
 * Created by 李庆 on 2016/10/6.
 */
define(["jquery","../../../framework/service/httpService"],function($,httpService){
    var c2Controller = ["$scope","maskService",function($scope,maskService){
        $scope.test = function(){
            console.log("enter controller");
        };

        $scope.getData = function(){
            maskService.show("get data");
            $.ajax({
                "type":"GET",
                "contentType":"application/json;charset=UTF-8",
                //修改前为"url":"mock/test.json",
                "url":httpService.getUrl("GET","/nova/test.json"),
                "success":function(data){
                    console.log(JSON.stringify(data));
                    setTimeout(function(){
                        maskService.hide();
                    },6000);
                },
                "error":function(data){
                    console.log("error");
                }
            });
        };

        $scope.data = "";
        setInterval(show,1000);


        function show(){
            console.log("data is "+ $scope.data);
        }
    }];
    return c2Controller;
});

变更部分内容如下：

在c2.html中定义输入框并绑定controller中定义的变量：

    
    
    request

变更部分内容如下：

然后我们来看一下页面：

在没有改变输入框的值之前，定时器打印的data变量值一直为空，当在输入框中输入1后，定时器打印的data变量值变为1，这表示视图数据变更映射到了元数据。

上面的例子中，controller中定义的变量data在页面上定义的输入框中正常显示，即为元数据映射到了视图，接下来我们看一个元数据映射到视图的特例：

我们在上例的定时器中变更变量data的值，查看输入框的值是否同步变更。

在c2.js中定义变量以及定时器：

/**
 * Created by 李庆 on 2016/10/6.
 */
define(["jquery","../../../framework/service/httpService"],function($,httpService){
    var c2Controller = ["$scope","maskService",function($scope,maskService){
        $scope.test = function(){
            console.log("enter controller");
        };

        $scope.getData = function(){
            maskService.show("get data");
            $.ajax({
                "type":"GET",
                "contentType":"application/json;charset=UTF-8",
                //修改前为"url":"mock/test.json",
                "url":httpService.getUrl("GET","/nova/test.json"),
                "success":function(data){
                    console.log(JSON.stringify(data));
                    setTimeout(function(){
                        maskService.hide();
                    },6000);
                },
                "error":function(data){
                    console.log("error");
                }
            });
        };

        $scope.data = 0;
        console.log(new Date());
        setInterval(show,1000);

        function show(){
            console.log(new Date());
            $scope.data++;
            console.log("data is "+ $scope.data);
        }
    }];
    return c2Controller;
});

变更部分内容如下（这里为了方便查看数据变化，还打印了时间戳）：

c2.html内容不变。

然后我们来看一下页面：

可以看到控制台打印的变量一直在变更，但是输入框的值一直保持不变。为什么数据双向绑定在这里失效了呢？这是由于我们在controller中自定义的定时器变更变量的行为angularjs并不感知（类似的行为还包括ajax的异步请求），此时就需要靠我们来主动触发数据双向绑定：

在c2.js中定义变量以及定时器，并主动触发数据双向绑定：

/**
 * Created by 李庆 on 2016/10/6.
 */
define(["jquery","../../../framework/service/httpService"],function($,httpService){
    var c2Controller = ["$scope","maskService",function($scope,maskService){
        $scope.test = function(){
            console.log("enter controller");
        };

        $scope.getData = function(){
            maskService.show("get data");
            $.ajax({
                "type":"GET",
                "contentType":"application/json;charset=UTF-8",
                //修改前为"url":"mock/test.json",
                "url":httpService.getUrl("GET","/nova/test.json"),
                "success":function(data){
                    console.log(JSON.stringify(data));
                    setTimeout(function(){
                        maskService.hide();
                    },6000);
                },
                "error":function(data){
                    console.log("error");
                }
            });
        };

        $scope.data = 0;
        console.log(new Date());
        setInterval(show,1000);

        function show(){
            console.log(new Date());
            $scope.$apply(function($scope){
                $scope.data++;
            });
            console.log("data is "+ $scope.data);
        }
    }];
    return c2Controller;
});

变更部分内容如下：

c2.html保持不变。

再看一下此时的页面：

此时控制台打印的变量一直在变更，且输入框的值也保持同步变更。

注意，只有在以下几种情况下才会触发数据双向绑定：

ng标签触发的事件

angularjs服务触发的数据变更（如$inerval，而不是原生的setInterval函数）

主动执行$digest()或$apply()