AngularJS基础——$scope里的$apply方法和$watch方法

最新推荐文章于 2020-08-07 10:24:19 发布

bboyjoe

最新推荐文章于 2020-08-07 10:24:19 发布

阅读量2.9k

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/bboyjoe/article/details/50433706

版权

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

$apply()的作用是传播Model的变化；

下面用一个定时刷新来示例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl" ng-click="show()">
        {{name}} {{age}}
    </div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.controller('firstCtrl',function($scope,$timeout){
        setTimeout(function(){
            $scope.$apply(function(){
                $scope.name="灭绝";
            });
        },2000);
        $timeout(function(){
            $scope.age=80;
        },2000);
        $scope.name="张三丰";
        $scope.age=108;
        $scope.show=function(){
            $scope.name="点击后的name";
            $scope.age="点击后的age";
        }
    });
</script>
</body>
</html>

$watch()的作用是监视Model的变化；

下面用一个购物车的监视运费的业务需求来示例：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        <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>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.controller('firstCtrl',function($scope){
        $scope.iphone = {
            money : 5,
            num : 1,
            fre : 10
        };
        $scope.sum=function(){
            return $scope.iphone.money * $scope.iphone.num;
        };
        //业务需求：当费用>=100时，运费为0，否则为10
        $scope.$watch($scope.sum,function(newValue,oldValue){
            console.log(newValue);
            console.log(oldValue);
            $scope.iphone.fre=newValue>=100?0:10;
        })
    });
</script>
</body>
</html>

bboyjoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS基础——$scope里的$apply方法和$watch方法

$apply()的作用是传播Model的变化；下面用一个定时刷新来示例： Angular基础 {{name}} {{age}} var myApp=angular.module('myApp',[]); myApp.controller('firstCtrl',function($scope,$timeo
复制链接

扫一扫