数据绑定

方向1(Model数据 绑定到View):

<div ng-controller="myCtrl">
<p>{{count}}</p>
<button ng-click="add()">点我</button>
</div>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope) {
$scope.count=0;
$scope.add=function(){
$scope.count++;
}
})
相比DOM操作:先去查找元素,再去设置元素,只需要把model数据绑定视图上,数据改,视
图就会更新。

方向2的绑定(将View数据绑定到Model数据)
<div ng-controller="myCtrl">
<input type="text" ng-model="text">
<p>{{text}}</p>
</div>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope) {
$scope.text=20;
$scope.$watch('text',function(){ $watch监视‘text’这是数据,有变化执行回掉函数
console.log($scope.text) 更改的值
})
})
首先是$scope方向1的绑定,绑定到view上,当在输入框输入时是对$scope中数据绑定,

<p>{{num}}</p>===>ng框架自动添加一个监听(watch),和$scope.$watch是一样的,只要是数据发生了变化,视图就会更新。???

如何知道数据是否发生了变化?
ng会周期性的运行一个函数来检查$scope的模型数据是否发生变化,称之为$digest===>$scope.$digest()

实现方法只有一种方式: ng-model
<input type='text' ng-model='myText'/>

$scope.$watch('模型变量名',function(){})



原文地址:https://www.cnblogs.com/liangfc/p/7529258.html