AngularJS更新的指令

顯示的數據我創建了一個簡單的指令：AngularJS更新的指令

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; 
     }; 
    } 
});

Plunker鏈接here。

調用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值更新

來源

2015-05-02 csharpfolk

如果CONSOLE.LOG scope.model和scope.n，你會得到如下：

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

scope.n: 1

我相信你所看到的行爲是因爲NG-重複出現：角生成並附加一個$$ hashkey對象，角用來跟蹤更新其中。

文檔說這個約$ ngModelController的$渲染方法：

由於NG-模式並不做一次深層的手錶，$渲染（）如果的$ modelValue和$ viewValue的值纔會調用實際上與以前的價值不同。如果$ modelValue或$ viewValue是對象（而不是字符串或數字，則爲），那麼如果僅更改對象的屬性，則不會調用$ render（）。

因此，似乎$ render正在調用scope.model，但不scope.n，但我不相信它實際上是。我認爲它正在更新，因爲$$ hashkey會將對象附加到scope.model。因爲使用scope.n你沒有得到hashkey，它不會更新。當angular做一個$摘要時，它會看到$$ hashkey並嘗試更新該綁定。

如果取出$$ hashkeys，它不再更新。我們可以將其附着到scope.model之前通過轉換$ viewValue剝離$$ hashkey：

scope.model = angular.fromJson(angular.toJson($viewValue)); 現在，如果你CONSOLE.LOG（scope.model）你： Object {n: 3}

沒有更多的$ $ hashkey，並且視圖按照您認爲的方式行事 - $ render沒有被調用。

Plunker

來源

2015-05-02 07:56:00 tpie

我注意到在對象上hashkey過，我只是努力用語言來表達我所看到的。好答案。 –

有關$$ hashkey的文檔中沒有。實際上，SO真的是我發現它的唯一深入信息的唯一地方。 – tpie

AngularJS更新的指令

回答

相關問題