秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

本文详细介绍了AngularJS中$scope.$watch方法的应用,包括如何使用此方法来监听模型的变化并执行相应的操作。通过具体的示例代码,展示了如何实现数值变化时更新运费等逻辑,并介绍了如何使用$apply确保视图及时更新。
  • $scope.$watch(watchFn , watchAction , deepWatch)

        其中,watchFn是带有angular表达式或函数字符串;

                watchAction是一个函数或者表达式,当watchFn发生变化时调用,如果是函数,其签名是function(newValue, oldValue, scope);

                deepWatch如果是ture,则会检查被监控对象的每一个属性是否发生了变化。

<script type="application/javascript">
            var modelMy = angular.module('modelMy',[]);
            modelMy.controller('shopList',['$scope',function($scope){ //scope容易被压缩成简短的其他字符 可以用第二种方法
                $scope.unitPrice = 38;
                $scope.count = 3;
                $scope.fre = 8;
                $scope.total = function(){
                    return $scope.unitPrice * $scope.count;
                };
/*              $scope.$watch( 'count' , function(value){  //监听$watch 单个''
                    console.log(value);
                })*/
                $scope.$watch( $scope.total , function(value){ //监听$watch 函数
                    $scope.fre = value >= 100 ? 0 : 8;
                })
            }])
</script>
  • $scope.$apply
<body ng-app="myApp">  
  <div ng-controller="MessageController">  
    Delayed Message: {{message}}  
  </div>    
</body>
<script>
 var m1 = angular.module('myApp',[]);
  m1.controller('MessageController', function($scope) {        
      $scope.getMessage = function() {  
        setTimeout(function() {  
          $scope.$apply(function() {  // 在这应用$apply方法
            $scope.message = '2秒后显示该文字';   
            console.log('message:' + $scope.message);  
          });  
        }, 2000);  
      }  
        
      $scope.getMessage();  
      
    });  
</script>

 

转载于:https://www.cnblogs.com/lovemomo/p/6104466.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值