ngModel $ modelValue和ngModel有什麼區別$ viewValue

Question

我有以下ckEditor指令。在底部是我從例子看到如何在編輯器中設定的數據的兩個變化：

app.directive('ckEditor', [function() { 
    return { 
     require: '?ngModel', 
     link: function ($scope, elm, attr, ngModel) { 

      var ck = null; 
      var config = attr.editorSize; 
      if (config == 'wide') { 
       ck = CKEDITOR.replace(elm[0], { customConfig: 'config-wide.js' }); 
      } else { 
       ck = CKEDITOR.replace(elm[0], { customConfig: 'config-narrow.js' }); 
      } 


      function updateModel() { 
       $scope.$apply(function() { 
        ngModel.$setViewValue(ck.getData()); 
       }); 
      } 

      $scope.$on('modalObjectSet', function (e, modalData) { 
       // force a call to render 
       ngModel.$render(); 
      }); 

      ck.on('change', updateModel); 
      ck.on('mode', updateModel); 
      ck.on('key', updateModel); 
      ck.on('dataReady', updateModel); 

      ck.on('instanceReady', function() { 
       ngModel.$render(); 
      }); 

      ck.on('insertElement', function() { 
       setTimeout(function() { 
        $scope.$apply(function() { 
         ngModel.$setViewValue(ck.getData()); 
        }); 
       }, 1000); 
      }); 

      ngModel.$render = function (value) { 
       ck.setData(ngModel.$modelValue); 
      }; 

      ngModel.$render = function (value) { 
       ck.setData(ngModel.$viewValue); 
      }; 
     } 
    }; 
}]) 

有人能告訴我是什麼樣的區別：

ck.setData(ngModel.$modelValue); 
ck.setData(ngModel.$viewValue); 

，哪些應該我使用。我看了看角文檔和它說：

$viewValue 

Actual string value in the view. 

$modelValue 

The value in the model, that the control is bound to. 

我不知道，當他寫這篇文檔中:-(

Answer 1

你正在尋找正確的文檔是作者的意思，但它可能僅僅是因爲你是一個有點糊塗的$modelValue和$viewValue有一個明顯的區別是這樣的：。

：

正如你已經如上所述實際字符串（或對象）值中的視圖。
$modelValue:模型中的值，即控件所綁定的值。

我打算假設您的ngModel指的是<input />元素......？所以你的<input>有一個字符串值，它顯示給用戶，對吧？但實際的模型可能是該字符串的其他版本。例如，輸入可能顯示字符串'200'，但<input type="number">（例如）實際上將包含模型值200作爲整數。因此，您在<input>中「查看」的字符串表示形式爲ngModel.$viewValue，數字表示形式爲ngModel.$modelValue。

另一個例子是一個<input type="date">其中$viewValue將像Jan 01, 2000和$modelValue將是一個實際的JavaScript Date對象，它表示該日期字符串。那有意義嗎？

我希望這能回答你的問題。

Answer 2

Angular必須跟蹤ngModel數據的兩個視圖 - DOM（瀏覽器）可以看到數據，然後是Angular處理的這些值的表示。 $viewValue是DOM側的值。因此，例如，在<input>中，$viewValue是用戶輸入到瀏覽器中的內容。

一旦有人鍵入<input>中的某些內容，則$viewValue將被$ parsers處理，並轉換爲名爲$modelView的值的Angular視圖。

所以，你能想到的$modelView是角的加工的價值，您在模型中看到價值的版本，而$viewValue是原始版本。

爲了讓這一步更進一步想象我們做了一些改變$modelView。Angular看到了這一改變，並呼籲$ formatters創建一個更新的$viewValue（基於新的$ modelView）發送到DOM。

Answer 3

你可以看到這樣的事情：

• $modelValue是外部API，也就是說，東西暴露給你的控制器。
• $viewValue是您的內部API，您應該只在內部使用它。

編輯$viewValue時，不會調用渲染方法，因爲它是「渲染模型」。您必須手動完成，而渲染方法將在$modelValue修改後自動調用。如果更改$viewValue

• ，$parsers會回來翻譯成 $modelValue：

  然而，信息將保持一致，這要歸功於$formatters和$parsers。

• 如果您更改$modelValue,$formatters將 將其轉換爲$viewValue。