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

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

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

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

引言

最近在項(xiàng)目中封裝控件的時(shí)候用到了$watch方法來監(jiān)聽module中的值的變化，當(dāng)時(shí)小編對(duì)這個(gè)方法不是很了解，所以在網(wǎng)上找了一些資料來學(xué)習(xí)一下，下面小編就給大家簡(jiǎn)單介紹一些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就是用來做這件事情的。我們?cè)谑褂?apply這個(gè)方法的時(shí)候，只要可以，請(qǐng)把要執(zhí)行的代碼和函數(shù)傳遞給$apply 去執(zhí)行，而不要自已執(zhí)行那些函數(shù)然后再調(diào)用$apply。

下面看一個(gè)Demo，寫一個(gè)定時(shí)器在兩秒以后改變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='點(diǎn)擊后的name';
    }
  $timeout(function(){
    $scope.age='50';
  },2000);
  })
</script>

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

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

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

$watch(watchFn, watchAction, deepWatch)

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

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

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

下面看一個(gè)Demo，當(dāng)費(fèi)用超過100的時(shí)候，運(yùn)費(fèi)為0否則運(yùn)費(fèi)為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>價(jià)格：<input type="text" ng-model="iphone.money"></p>
  <p>個(gè)數(shù)：<input type="text" ng-model="iphone.num"></p>
  <p>費(fèi)用： <span>{{sum() | currency:'￥'}}</span></p>
  <p>運(yùn)費(fèi)： <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這個(gè)函數(shù)在項(xiàng)目中會(huì)經(jīng)常用到，所以我們需要對(duì)這個(gè)函數(shù)靈活的掌握，這樣我們?cè)谧远丶蛘咄瓿梢恍┍容^復(fù)雜的需求的時(shí)候很更加的方便。

小結(jié)

以上是小編對(duì)中兩個(gè)方法的總結(jié)，這些都是比較入門的知識(shí)，如果想更好的對(duì)這些知識(shí)了解還需要我們?cè)陧?xiàng)目中好好的研究。

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

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

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

您可能感興趣的文章: