您的位置：首页 > 移动开发

ionic准备之angular基础——$watch,$apply,$timeout方法（5）

2016-03-25 18:14 579 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航