@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("firstController", function ($scope, $timeout) {
setTimeout(function () {
// $scope.name = "111";//这样写两秒后不会改变name的值
$scope.$apply(function () { //使用一些外部的方法（如js，jquery）使model发生变化我们就需要使用到$apply:用法就是把要执行的外部方法放在$apply()里面
$scope.name = "111";
});
}, 2000);
$scope.name = "张三";
$scope.age = 10;
$scope.show = function () {
$scope.name = "点击我了";
}
$timeout(function () {
$scope.age = "50";
}, 2000);
});
app.controller("secondController", function ($scope) {
$scope.iphone = {
money: 15,
num: 1,
fre: 10
};
$scope.sum = function () {
return $scope.iphone.money * $scope.iphone.num;
};
$scope.$watch($scope.sum, function (newValue, oldValue) { //监视$scope.sum的变化
$scope.iphone.fre = newValue >= 100 ? 0 : 10;
});
});
</script>
</head>
<body>
<h1>
$apply 传播model的变化
</h1>
<h1>
$watch 监听model的变化
</h1>
<div ng-app="myApp">
<div ng-controller="firstController" ng-click="show()">
{{name}}<br />
{{age}}
</div>
<div ng-controller="secondController">
<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>
</body>
</html>
