$apply()的作用是传播Model的变化;
下面用一个定时刷新来示例:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstCtrl" ng-click="show()">
{{name}} {{age}}
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[]);
myApp.controller('firstCtrl',function($scope,$timeout){
setTimeout(function(){
$scope.$apply(function(){
$scope.name="灭绝";
});
},2000);
$timeout(function(){
$scope.age=80;
},2000);
$scope.name="张三丰";
$scope.age=108;
$scope.show=function(){
$scope.name="点击后的name";
$scope.age="点击后的age";
}
});
</script>
</body>
</html>
$watch()的作用是监视Model的变化;
下面用一个购物车的监视运费的业务需求来示例:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstCtrl">
<p>单价:<input type="text" ng-model="iphone.money"></p>
<p>个数:<input type="text" ng-model="iphone.num"></p>
<p>费用:<span>{{ sum() | currency:'¥' }}</span></p>
<p>运费:<span>{{iphone.fre | currency:'¥'}}</span></p>
<p>总额:<span>{{ sum() + iphone.fre | currency:'¥'}}</span></p>
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[]);
myApp.controller('firstCtrl',function($scope){
$scope.iphone = {
money : 5,
num : 1,
fre : 10
};
$scope.sum=function(){
return $scope.iphone.money * $scope.iphone.num;
};
//业务需求:当费用>=100时,运费为0,否则为10
$scope.$watch($scope.sum,function(newValue,oldValue){
console.log(newValue);
console.log(oldValue);
$scope.iphone.fre=newValue>=100?0:10;
})
});
</script>
</body>
</html>