亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Angular中的$watch方法詳解

 更新時間:2017年09月18日 11:41:34   作者:kiven  
本文通過實例代碼給大家介紹了Angular中的$watch方法,包括$watch簡介及基本用法,需要的朋友參考下吧

在$apply方法中提到過臟檢查,首先apply方法會觸發(fā)evel方法,當evel方法解析成功后,會去觸發(fā)digest方法,digest方法會觸發(fā)watch方法。

(1)$watch簡介

在digest執(zhí)行時,如果watch觀察的的value與上一次執(zhí)行時不一樣時,就會被觸發(fā)。

AngularJS內(nèi)部的watch實現(xiàn)了頁面隨model的及時更新。

$watch方法在用的時候主要是手動的監(jiān)聽一個對象,但對象發(fā)生變化時觸發(fā)某個事件。

(2)watch方法用法

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表達式或函數(shù)的字符串

watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會被調(diào)用

deepWatch:可選的布爾值命令檢查被監(jiān)控的對象的每個屬性是否發(fā)生變化

$watch會返回一個函數(shù),想要注銷這個watch可以使用函數(shù)

(3)例子

在前面的例子中,當name的表單改變30次,然后觸發(fā)某個事件。

控制器代碼如下:

var firstController = function ($scope){
  $scope.name='張三';
  $scope.count=0;
  // 監(jiān)聽一個model 當一個model每次改變時 都會觸發(fā)第2個函數(shù)
  $scope.$watch('name',function(newValue,oldValue){
    ++$scope.count;
    if($scope.count > 30){
      $scope.name = '已經(jīng)大于30次了';
    }
  });
}

html代碼如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div ng-app="">
    <div ng-controller="firstController">
      <input type="text" value="" ng-model="name"/>
      改變次數(shù):{{count}}-{{name}}
    </div>
  </div>
  <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

運行效果如下:

前30次可以隨意修改:

當修改了30次后,name固定為'已經(jīng)大于30次了':

這就是watch的作用,model每一次改變時都會觸發(fā)第二個函數(shù)。

(4)watch的第三個參數(shù)

當監(jiān)聽的為一個對象或者數(shù)組時,例如:

 $scope.data = {
    name :'李四',
    count:20
  }

此時data里的name和count都要監(jiān)聽,那么可以這么寫:

  $scope.$watch('data',function(){
  },true)

如果不加第三個參數(shù),那么只會監(jiān)聽data,只有當data引用改變時才會觸發(fā)。

因此當需要監(jiān)聽一些引用對象需要把第三個參數(shù)設(shè)置成true。

總結(jié)

以上所述是小編給大家介紹的Angular中的$watch方法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Angular2 父子組件通信方式的示例

    Angular2 父子組件通信方式的示例

    本篇文章主要介紹了Angular2 父子組件通信方式的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • AngularJS實現(xiàn)標簽頁的兩種方式

    AngularJS實現(xiàn)標簽頁的兩種方式

    這篇文章分別給大家介紹了AngularJS實現(xiàn)標簽頁的兩種方式,一種是通過普通指令實現(xiàn)標簽頁,另外一種是通過自定義指令實現(xiàn)的標簽頁,有需要的朋友們可以來參考借鑒,下面來一起看看吧。
    2016-09-09
  • angular 實現(xiàn)下拉列表組件的示例代碼

    angular 實現(xiàn)下拉列表組件的示例代碼

    這篇文章主要介紹了angular 實現(xiàn)下拉列表組件的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2019-03-03
  • AngularJS中$watch和$timeout的使用示例

    AngularJS中$watch和$timeout的使用示例

    這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子,通過示例代碼相信更能讓大家理解,有需要的朋友們下面來一起看看吧。
    2016-09-09
  • Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    ng-template 是用來定義模板的,當使用ng-template定義好一個模板之后,可以用ng-container和templateOutlet指令來進行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友參考下吧
    2018-08-08
  • angularJs的ng-class切換class

    angularJs的ng-class切換class

    這篇文章主要介紹了angularJs的ng-class切換class,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • 掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)技巧

    掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)技巧

    這篇文章主要介紹了掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • 理解Angular的providers給Http添加默認headers

    理解Angular的providers給Http添加默認headers

    本篇文章主要介紹了理解Angular的providers給Http添加默認headers,具有一定的參考價值,有興趣的同學(xué)可以了解一下
    2017-07-07
  • Angularjs Promise實例詳解

    Angularjs Promise實例詳解

    Promise是一個構(gòu)造函數(shù),自己身上有all、reject、resolve這幾個異步方式處理值的方法,原型上有then、catch等同樣很眼熟的方法,下面通過實例代碼給大家講解angularjs promise 的相關(guān)知識,感興趣的朋友一起看看吧
    2018-03-03
  • angular2+node.js express打包部署的實戰(zhàn)

    angular2+node.js express打包部署的實戰(zhàn)

    本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論