AngularJS $scope里面的$apply方法和$watch方法

1. AngularJS $scope 里面的$apply 方法

(1)$apply 方法作用： Scope 提供$apply 方法传播 Model 的变化 。

(2)$apply 方法使用情景： angularjs 外部的控制器（DOM 事件、外部的回调函数如 jQuery UI 空间等）调用了 AngularJS 函数之 后，必须调用$apply。在这种情况下，你需要命令 AngularJS 刷新自已（模型、视图等），$apply 就是 用来做这件事情的。

(3)$apply 方法注意事项： 只要可以，请把要执行的代码和函数传递给$apply 去执行，而不要自已执行那些函数然后再调用$apply。 

 

[html]  
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>无标题文档</title>  
  6.         <script type="text/javascript" src="angular.min.js"></script>  
  7.     </head>  
  8.     <body>  
  9.       <div ng-app="myApp">  
  10.   
  11.           <div ng-controller="firstController" ng-click="show();">  
  12.             {{name}} {{age}}  
  13.           </div>  
  14.   
  15.       </div>  
  16.       <script type="text/javascript">  
  17.           var app = angular.module("myApp", []);  
  18.           app.controller('firstController',function($scope,$timeout){  
  19.   
  20.              setTimeout(function(){  
  21.   
  22.                  $scope.$apply(function(){  
  23.   
  24.                      $scope.name='1111';  
  25.   
  26.                  });  
  27.   
  28.              },2000);  
  29.   
  30.   
  31.               $timeout(function(){  
  32.                   $scope.age='50';  
  33.   
  34.               },2000);  
  35.   
  36.   
  37.   
  38.               $scope.name='张三';  
  39.               $scope.age='10';  
  40.   
  41.               $scope.show=function(){  
  42.                   alert('111');  
  43.                   $scope.name='点击后的name';  
  44.               }  
  45.   
  46.           });  
  47.       </script>  
  48.          
  49.     </body>  
  50. </html>  

2. Angularjs $scope 里面的$watch 方法 

(1)$watch 方法作用：  $watch 方法监视 Model 的变化。 

[html]
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>无标题文档</title>  
  6.         <script type="text/javascript" src="angular.min.js"></script>  
  7.     </head>  
  8.     <body>  
  9.       <div ng-app="myApp">  
  10.   
  11.           <div ng-controller="firstController">  
  12.   
  13.               <p>单价:<input type="text" ng-model="iphone.money"></p>  
  14.               <p>个数:<input type="text" ng-model="iphone.num"></p>  
  15.               <p>费用:<span>{{ sum() | currency:'￥' }}</span></p>  
  16.               <p>运费:<span>{{iphone.fre | currency:'￥'}}</span></p>  
  17.               <p>总额:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p>  
  18.           </div>  
  19.   
  20.       </div>  
  21.       <script type="text/javascript">  
  22.           var app = angular.module("myApp", []);  
  23.           app.controller('firstController',function($scope){  
  24.                 // $scope.name='fasdfds';  
  25.                   $scope.iphone = {  
  26.                       money : 5,  
  27.                       num : 1,  
  28.                       fre : 10  
  29.                   };  
  30.                   $scope.sum=function(){  
  31.                       return $scope.iphone.money * $scope.iphone.num;  
  32.                   };  
  33.   
  34.               $scope.$watch($scope.sum,function(newValue,oldValue){  
  35.   
  36.                  console.log(newValue);  
  37.                  console.log(oldValue);  
  38.                   $scope.iphone.fre=newValue>=100 ? 0:10;  
  39.   
  40.   
  41.               });  
  42.   
  43.   
  44.           });  
  45.       </script>  
  46.          
  47.     </body>  
  48. </html>  
 
posted @ 2017-07-17 14:24  铭绘  阅读(350)  评论(0)  编辑  收藏  举报