@{ 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>