您的位置：首页 > 移动开发

补充——理解$watch ，$apply 和 $digest --- 理解数据绑定过程

2016-07-26 19:23 661 查看 
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<input ng-model="name" /><br>
<clickable foo="foo" bar="bar"></clickable>
</div>
<script>
app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "aaa";
$scope.foo = 0;
$scope.bar = 0;
});
app.directive('clickable', function() {
return {
restrict: "E",
scope: {
foo: '=',
bar: '='
},
template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
scope.bar++;
});
}
}

});
</script>
</body>
</html>


点击自定义指令对应的ul列表时，数据模型foo、bar的值会自增，但视图上不会有更新，因为没有手动的调用 $apply() 以触发$digest 循环（$digest 循环会处理$watch队列）。

而如果此时改变输入框的值，输入框改变对应的事件发生，该事件对应的函数会被包裹在一个函数中，传给$scope.$apply()作为参数，其中触发$digest循环，处理所有$watch队列。

此处有一个疑问就是，这里所指的所有$watch指的是一个controller中还是一个angualr应用中的即ng-app的范围内，下面实践了一下：

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<input ng-model="name" />
</div>
<div ng-controller="subCtrl">
<clickable foo="foo" bar="bar"></clickable>
</div>
<script>
app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "aaa";
});
app.directive('clickable', function() {
return {
restrict: "E",
scope: {
foo: '=',
bar: '='
},
template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
scope.bar++;
});
}
}

});
app.controller('subCtrl', function($scope) {
$scope.foo = 0;
$scope.bar = 0;
});
</script>
</body>
</html>


结论：

一次$digest中，包含一个angular app的范围内的所有$watch都会被执行。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angular
相关文章推荐
新的分享
章节导航