關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解

更新時(shí)間：2017年04月24日 07:44:49 投稿：jingxian

下面小編就為大家?guī)硪黄P(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

$Watch：(監(jiān)聽一個(gè)model,當(dāng)一個(gè)model每次改變時(shí)，都會(huì)觸發(fā)第二個(gè)函數(shù))

$watch('watchFn',watchAction,deepWatch)

watchFn：帶有Angular 表達(dá)式或者函數(shù)的字符串，它會(huì)返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。

watchAction： 一個(gè)函數(shù)function(newValue,oldValue){},當(dāng)watchFn 發(fā)生變化時(shí)會(huì)被調(diào)用

deepWatch：默認(rèn)為false，監(jiān)聽數(shù)組的某個(gè)元素或者對(duì)象的屬性時(shí)設(shè)置為true;

監(jiān)控一個(gè)屬性：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <div class="form-group">
      <input ng-model="name" />{{name}}
      <p>改變次數(shù){{count}}</p>
    </div>
  </form>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
  
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope){
    $scope.name = '橘子';
    $scope.count = 0;
    $scope.$watch('name', function (newValue, oldValue) {
      $scope.count++;
      if($scope.count >5){
        $scope.name = '蘋果';
      }
    });
  });
</script>
</body>
</html>

監(jiān)控一個(gè)對(duì)象（deepWidth為true）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <div class="form-group">
      <input ng-model="Data.name" />{{Data.name}}
      <p>改變次數(shù){{count}}</p>
    </div>
  </form>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">

  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope){
    $scope.Data = { name: '橘子' };
    $scope.count = 0;
    $scope.$watch('Data', function (newValue, oldValue) {
      if(newValue == oldValue)
      return;
      $scope.count++;
      if($scope.count >5){
         $scope.Data.name = '蘋果';
      }
    }, true);
  });
</script>
</body>
</html>

以上這篇關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: