手錶與基於形式和非形式的基於性能

在一個相當大的頁面，用戶可以以各種方式編輯數據對象的變化： - 更改一些「經典」的輸入框 - 通過點擊一個按鈕添加文件 - 通過拖動更改項目的順序和下降手錶與基於形式和非形式的基於性能

在HTML中，一個簡單的例子可能看起來像這樣：

<form> 
    Name: <input ng-model="person.name"> 
    Title: <input ng-model="person.title"> 
    Image: <our-custom-image-uploade-directive ng-model="person.image"/> 
    Skills: <our-custom-skill-drag-and-drop-directive ng-model="person.skills"/> 
    <button ng-click="save()">Save</button> 
</form>

你看，有些編輯「設施」是基於表單的，有些則不是。

現在，要做一個相當簡單的任務：如果用戶沒有改變任何東西或者碰巧與用戶與之交互之前的數據狀態相同，則禁用「保存」按鈕數據。

現在我想知道哪個是實現該目標的最佳方法。

一種方法可能是深入觀察整個人物。這樣的：

$scope.backupCopyOfPerson = angular.copy($scope.person); // Creae a backup copy of the state before the user changed something 

$scope.$watch('person', function (newValue) { 
      if(newValue && $scope.backupCopyOfPerson) { 
       if(angular.equals(newValue, $scope.backupCopyOfPerson)) { 
        $scope.unsavedChanges = false; 

       } 
       else { 
        $scope.unsavedChanges = true; 
       } 
      } 
     }, true);

然而，深看有很多的子對象等的大對象可能會導致一些嚴重的性能問題。

另一個想法是，使用ng-pristine的香草表單字段和所有其他指令等$setDirty()/$setPristine()做。這可能會更快，但它絕對不是一個優雅的解決方案。

你覺得呢？

角的版本是1.58

來源

2016-11-16 cis

我拿到這個：

如果您有與觀看演出的問題：您應該結合角形式檢查常規輸入，並在其他屬性添加一個觀察者。

這將節省您的時間&表演，你會看的已經不是

$scope.$watch('person.image', function (newValue) { 
     $scope.unsavedChanges.image = ($scope.person.image == $scope.backupCopyOfPerson.image) 
}}, true);

，然後變量在保存時，如果你的unsavedChanges至少1真

來源

2016-11-16 11:10:11 Kable

手錶與基於形式和非形式的基於性能

回答

相關問題