<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp">
<!--$watch用法-->
<div ng-controller="firstController">
数量：<input type="text" ng-model="amount"><br>
价格：{{price}}<br>
总计：{{sum}}<br>
</div>
<!--apply用法-->
<div ng-controller="secondController">{{num}}</div>
<!--$timeout用法-->
<div ng-controller="threeController">{{num}}</div>
</body>
<script src="angular/angular.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller('firstController',function($scope){
$scope.amount=123;
$scope.price=20;
$scope.sum= $scope.amount*$scope.amount;
$scope.$watch('amount',function(newValue,oldValue){ //更新amount变化
$scope.sum=newValue*$scope.price;
});
})
/*$apply用法*/
app.controller('secondController',function($scope){
$scope.num=20;
setTimeout(function(){
$scope.num=30;
$scope.$apply(); /*更新view*/
},1500);
})
/*$timeout用法*/
app.controller("threeController",function($scope,$timeout){
$scope.num=20;
$timeout(function(){
$scope.num=30;
},1200);
});
</script>
</html>