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

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

　　

posted @ 2016-03-25 18:14  jtanx  阅读(720)  评论(0)    收藏  举报