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

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