快捷導(dǎo)航

AngularJS中$apply方法和$watch方法用法總結(jié)

更新時間：2016年12月13日 10:46:11 作者：鄭浩-

這篇文章主要介紹了AngularJS中$apply方法和$watch方法用法,結(jié)合實例形式總結(jié)分析了$apply方法和$watch方法的功能、參數(shù)含義、使用技巧與相關(guān)注意事項,需要的朋友可以參考下

本文實例總結(jié)了AngularJS中$apply方法和$watch方法用法。分享給大家供大家參考，具體如下：

引言

最近在項目中封裝控件的時候用到了$watch方法來監(jiān)聽module中的值的變化，當(dāng)時小編對這個方法不是很了解，所以在網(wǎng)上找了一些資料來學(xué)習(xí)一下，下面小編就給大家簡單介紹一些AngularJS中Scope 提供$apply 方法傳播Model 的變化和$watch方法監(jiān)聽module變化。

$apply使用情景

AngularJS 外部的控制器（DOM 事件、外部的回調(diào)函數(shù)如 jQuery UI 空間等）調(diào)用了AngularJS 函數(shù)之后，必須調(diào)用$apply。在這種情況下，你需要命令 AngularJS 刷新自已（模型、視圖等），$apply就是用來做這件事情的。我們在使用$apply這個方法的時候，只要可以，請把要執(zhí)行的代碼和函數(shù)傳遞給$apply 去執(zhí)行，而不要自已執(zhí)行那些函數(shù)然后再調(diào)用$apply。

下面看一個Demo，寫一個定時器在兩秒以后改變name的值：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>RunJS</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
  <script src="serviceJS01.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="firstController" ng-click="show()">
{{name}}
  {{age}}
</div>
</body>
</html>
<script>
  var app = angular.module("myApp",[]);
  app.controller('firstController',function($scope,$timeout){
    setTimeout(function(){
      $scope.$apply(function(){
        $scope.name="李四";
      })
    },2000);
    $scope.name="張三";
    $scope.age='10';
    $scope.show=function(){
      $scope.name='點擊后的name';
    }
  $timeout(function(){
    $scope.age='50';
  },2000);
  })
</script>

在上面代碼中如果我們不使用$apply來傳播name值的改變，而是直接將$scope.name="李四"這句代碼寫在setTimeout函數(shù)中，界面上顯示的值根本就不會改變。

$watch方法監(jiān)聽module變化

當(dāng)你的數(shù)據(jù)模型中某一部分發(fā)生變化時，$watch 函數(shù)可以向你發(fā)出通知。你可以監(jiān)控單個對象的屬性，也可以監(jiān)控需要經(jīng)過計算的結(jié)果（函數(shù)），實際上只要能夠被當(dāng)作屬性訪問到，或者可以當(dāng)作一個JavaScript 函數(shù)被計算出來，就可以被$watch 函數(shù)監(jiān)控。它的函數(shù)簽名為:

$watch(watchFn, watchAction, deepWatch)

watchFn參數(shù)：這個是我們監(jiān)聽地方目標(biāo)對象，它是一個帶有angular表達(dá)式或者函數(shù)的字符串；

watchAction參數(shù)：這是一個函數(shù)或者表達(dá)式，當(dāng)watchFn 發(fā)生變化時會被調(diào)用。如果是函數(shù)的形式，它將會接收到watchFn 的新舊兩個值，以及作用域?qū)ο蟮囊?。其函?shù)簽名為function(newValue, oldValue, scope)。

deepWatch參數(shù)：如果設(shè)置為true，這個可選的布爾型參數(shù)將會命令A(yù)ngular 去檢查被監(jiān)控對象的每個屬性是否發(fā)生了變化。如果你想要監(jiān)控數(shù)組中的元素，或者對象上的所有屬性，而不只是監(jiān)控一個簡單的值，你就可以使用這個參數(shù)。

下面看一個Demo，當(dāng)費用超過100的時候，運費為0否則運費為10：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>RunJS</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
  <script src="serviceJS01.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="firstController" ng-click="show()">
  <p>價格：<input type="text" ng-model="iphone.money"></p>
  <p>個數(shù)：<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>
</body>
</html>
<script>
  var app = angular.module("myApp",[]);
  app.controller('firstController',function($scope){
  $scope.iphone={
    money:5,
    num:1,
    fre:10
  };
    $scope.sum=function(){
      return $scope.iphone.money * $scope.iphone.num;
    }
    $scope.$watch($scope.sum,function(newValue,oldValue){
      $scope.iphone.fre=newValue>=100?0:10
    })
  })
</script>

$watch這個函數(shù)在項目中會經(jīng)常用到，所以我們需要對這個函數(shù)靈活的掌握，這樣我們在自定控件或者完成一些比較復(fù)雜的需求的時候很更加的方便。

小結(jié)

以上是小編對中兩個方法的總結(jié)，這些都是比較入門的知識，如果想更好的對這些知識了解還需要我們在項目中好好的研究。

源碼地址：http://runjs.cn/code/ovjwuxhn

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: