1

私のプランクには、 $scope.$watch を添付した整数の配列があります。アレイを更新すると、$scope.$watch が console.log を起動しません。console.log が呼び出されないのはなぜですか?

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="test" ng-controller="testArray">

    <div ng-repeat="item in MyArray track by $index"> {{item}}</div>
    <button ng-click="add()">testing Add</button>
  </body>

</html>
<script type="text/javascript">
    'use strict';
    var app = angular.module('test', []);

    app.controller('testArray',['$scope',function($scope){

      $scope.MyArray = [1,2,3,4]

      $scope.add = function(){
        $scope.MyArray.push($scope.MyArray.length+1);
      }
    $scope.$watch('MyArray' , function(){
      console.log($scope.MyArray);
    })
    }]);

</script>
4

2 に答える 2

4

コードを次のように変更します

$scope.$watch('MyArray' , function(){
    console.log($scope.MyArray);
}, true)

ドキュメントを見ると、3 番目のパラメーターが、$watch メソッドがオブジェクトの等価性を使用して配列が変更されたかどうかを判断することを示していることがわかります。これは、angular が angular.equals配列比較をサポートするメソッドを使用することを意味します。たとえば、

于 2016-04-13T20:55:46.027 に答える
2

関数にオプションを$watchCollection付けるだけで、ディープウォッチャーよりも安価になります。true$watch

$scope.$watchCollection('MyArray' , function(){
    console.log($scope.MyArray);
})

は$watchCollection()1 レベル深くなり、コレクション内の最上位アイテムの追加の浅い参照チェックを実行します。

監視したい非常に大きな配列がある場合は、（ディープウォッチャー）を使用しないで$watchくださいtrue。1000/レコードの場合2000、アンギュラー バインディングでラグを感じます。したがって、推奨されるアプローチは、できる限り回避watcherするか、単に行くことです$watchCollection

于 2016-04-13T20:56:56.250 に答える