AngularJS更新指令中显示的数据

csharpfolk 发表于 Dev

犀利的人

我创建了一个简单的指令：

var app = angular.module('plunker', []);

function Data(n) {
  this.n = n;
}

app.controller('MainCtrl', function($scope) {
  $scope.data = [
      new Data(1),
      new Data(2),
      new Data(3)
    ];


  $scope.addNew = function() {
    for (var i = 0; i < $scope.data.length; i += 1) {
      $scope.data[i].n *= 10;
    }

    $scope.data.push(new Data(1));
  }

});

app.directive('data', function() {
  return {
          require: 'ngModel',

          template: '<div><span>n using scope: {{n}}</span><br><span>n using model: {{model.n}}</span></div>',

          restrict: 'E',
          link: postLink,
          scope: {},
        };

  function postLink(scope, element, attrs, ngModelController) {
      ngModelController.$render = function() {
          var $viewValue = ngModelController.$viewValue;
          scope.n = $viewValue.n;
          scope.model = $viewValue;
      };
  }
});

请在此处链接。

调用addNew()几次后，我得到输出：

n using scope: 1
n using model: 1000
n using scope: 2
n using model: 2000
n using scope: 3
n using model: 3000
n using scope: 1
n using model: 100
n using scope: 1
n using model: 10
n using scope: 1
n using model: 1

我理解为什么scope.n不更新值（正如ngModelController的文档中明确指出的那样，但我想知道为什么scope.model更新值？

如果您使用console.logscope.model和scope.n，则会得到以下信息：

scope.model: Data {n: 1, $$hashKey: "object:21"}

scope.n: 1

我相信您看到的行为是由于ng-repeat引起的：angular生成$ hashkey并将其附加到对象，angular用于跟踪更新。

文档说了有关$ ngModelController的$ render方法：

由于ng-model不会进行深入监视，因此仅在$ modelValue和$ viewValue的值实际上与之前的值不同时才调用$ render（）。如果$ modelValue或$ viewValue是对象（而不是字符串或数字），则如果仅更改对象的属性，则不会调用$ render（）。

因此，似乎$ render正在为scope.model而不是scope.n被调用，但我不相信实际上是这样。我认为它正在更新，因为将$$ hashkey与对象附加到scope.model。因为使用scope.n并没有获得hashkey，所以它不会更新。当angular执行$ digest时，将看到$$ hashkey并尝试更新该绑定。

如果取出$$ hashkeys，它将不再更新。我们可以通过在将$ viewValue附加到scope.model之前转换$ viewValue来剥离$$ hashkey：

scope.model = angular.fromJson(angular.toJson($viewValue)); 现在，如果您使用console.log（scope.model），您将获得： Object {n: 3}

不再有$$ hashkey，并且视图以您认为的方式运行-在未调用$ render的情况下。

柱塞

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。