angularJS的$watch和$apply

时间:2023-12-15 14:06:26
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="fng">
<div ng-controller="fc1">
<div ng-bind="timeNow"></div>
<div ng-bind="timeNow2"></div>
<hr>
<div ng-bind="test.count"></div>
<div ng-bind="test.name"></div>
<input type="button" value="增加" ng-click="add()"/>
</div>
</body>
<script src="angular.js"></script>
<script>
var ngApp=angular.module("fng",[]);
ngApp.controller("fc1",['$scope','$http',function($scope){
$scope.timeNow=new Date(); setInterval(function(){
//从一个宏观的角度来看$scope.$apply要比$scope.$watch的范围大得多
/*
* $scope.$apply方法内部给出要更新的$scope局部成员,
* 这样才能触发ng的局部更新监听
* (如果使用$digest的话那么整个$scope中的成员变化都会被监听,效率大大降低)
* */
$scope.$apply(function() {
if (true) {
$scope.timeNow = new Date();
$scope.timeNow2 = new Date();
}
});
});
//=====================================================
$scope.test={
count:0,
name:"小于10"
};
$scope.add=function(){
$scope.test.count+=1;
};
//这是针对于你想跟踪一个你自己的成员而设计
/*
* $scope.$watch提供三个参数(对象成员/其他成员, 回调函数, (可选)*对象成员的属性*是否有变化)
* 第三个参数如果不填,只有该对象变为数组或者其它类型才能触发回调函数
* */
$scope.$watch('test',function(){
if($scope.test.count>10){
$scope.test.name="大于10啦!";
}
},true);
}]);
</script>
</html>