一. html与Controller中的双向数据绑定
html-Controller的双向数据绑定，在开发中非常常见，也是Angularjs1.x的宣传点之一，使用中并没有太多问题。
1.1数据从html流向controller也就是从视图层流向模型层,原生html中需要使用表单元素（例如input标签）来收集用户输入信息,Angularjs中通过在表单元素上使用ng-model标签，当用户输入信息时，同步将用户输入的信息赋值给controller中的变量：
<body ng-app="myApp"> <div ng-controller="myCtrl"> <p>改变输出值:</p> <input type="text" ng-model="testInfo.content" ng-change="showInput()"> </div> <script src="http://www.likecs.com/angular.min.js"></script> <script> angular.module('myApp',[]) .controller('myCtrl',['$scope',function($scope){ $scope.showInput = function() { console.log($scope.testInfo.content); } }]); </script> </body>在页面上输入1234567即可看到，每次在页面输入数字后，控制台输出的$scope,testInfo.content的值都和页面保持一致：
也就是从模型层流向数据层,当controller中的数据模型变量发生变化后，Angularjs又会根据数据模型的值去改变ng-model指令绑定的表单元素的值,使用ng-bind指令也可以被动获得来自controller的数据流。
我们编写如下demo进行测试：
<body ng-app="myApp"> <div ng-controller="myCtrl"> <button ng-click="add()">+1</button> <p>改变输出值:</p> <input type="text" ng-model="testInfo.content"> <p>使用ng-bind绑定的标签：</p> <p ng-bind="testInfo.content"></p> </div> <script src="http://www.likecs.com/angular.min.js"></script> <script> angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { //初始化 $scope.testInfo = { content: 0 } $scope.add = function () { $scope.testInfo.content += 1; console.log($scope.testInfo.content); } }]); </script> </body>demo中，每次点击+1按钮，$scope.testInfo.content的值会增加1，我们可以看到页面上的结果：
来看看第一个活见鬼的例子，demo跟上面很类似，只是将鼠标点击触发的方式改成了定时器自动触发：
<body ng-app="myApp"> <div ng-controller="myCtrl"> <button ng-click="add()">+1</button> <p>改变输出值:</p> <input type="text" ng-model="testInfo.content"> <p>使用ng-bind绑定的标签：</p> <p ng-bind="testInfo.content"></p> </div> <script src="http://www.likecs.com/angular.min.js"></script> <script> angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { //初始化 $scope.testInfo = { content: 0 } //定时自增 setInterval(function () { $scope.testInfo.content += 1; console.log('$scope.testInfo.content的值现在是:',$scope.testInfo.content); },1000) }]); </script> </body>你会活见鬼地发现，数据模型一直在变，但是页面却没有刷新：
这里就是 Angularjs1.X双向数据绑定中的第一个坑 ,你会发现$scope上绑定的数据模型和html中显示的内容有时候并不是实时关联的。这其实和Angularjs1.X的执行机制有关系。
如果我们自己来考虑，javascript中有一个变量的值发生了变化，现在要将这个值同步到html页面上，需要怎么做呢？我们需要获取到这个DOM元素，然后改变它的innerHTML属性,如果是表单元素就修改value。其实Angularjs也是这样做的，只不过使用了自己的封装的方法——$apply()。那么此处的问题其实就在于，在setInterval的回调函数中去修改数据模型的值时，没有触发$apply()方法来更新视图，而通过调用Angularjs封装的ng-*方法（例如ng-click点击方法)来修改视图模型时，会自动触发$apply()方法,视图也就同步刷新了。
解决方案1