引言
angular js的双向数据绑定,在开发中起到的作用灰常大,但是,并不是所有时候都能起作用。
找了下资料发现,双向数据绑定其实也就是当模型发生了变化的时候,
重绘了DOM,使你看到数据被更新了,引发模型变化的情况有:
1.dom事件;
2.响应触发回调;
3.浏览器的地址变化;
4.计时器触发回调;
以上的某一个情况发生,都会触发模型监控机制,同时调用了$apply方法,重绘了dom;
通常情况下,我们使用的一些指令或服务,
如$http,$timeout,$location等都会调用$apply方法,
从而使用dom被重绘,数据得到更新,实现了双向数据绑定。
而在有些情况下,比如回调里,
回调函数里执行的方法被不会触发$apply方法。假如当你点击打了比较input select radio等等,
触发了模型监控,值也随之更新了。
此时需要手动调$scope方法,使dom重绘。
实例代码:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
展示数据:<span ng-bind="name"></span>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "tom";
setTimeout(function() {
$scope.name = "jerry";
console.log("*****************");
}, 1000);
$scope.$watch("name", function(nv, ov) {
console.log("$watches:", nv, ov);
},true);
});
</script>
</body>
</html>
$watch方法监听module变化
当你的数据模型中某一部分发生变化时,$watch 函数可以向你发出通知。你可以监控单个对象的属性,也可以。
监控需要经过计算的结果(函数),实际上只要能够被当作属性访问到,或者可以当作一个JavaScript 函数被计算。
小结
$watch这个函数在项目中会经常用到,所以我们需要对这个函数灵活的掌握,
这样我们在自定控件或者完成一些比较复杂的需求的时候很更加的方便。