值不更新角輸入視圖

Question

我需要，所以我創建使用模板與需要一個指令的格式輸入值：「ngModel」，因爲我必須使用ngModelController功能（$解析器 ，$ formatters等）。

這是我的HTML：

<div ng-model="myInputValue" amount-input-currency=""></div> 
{{myInputValue}} 

這是我的指令：

.directive('amountInputCurrency', [function(){ 
     return { 
      templateUrl: '../amountInputCurrency.tmpl.html', 
      require: 'ngModel', 
      restrict: 'A', 
      link: function(scope, elem, attrs, model) { 
     // ... 
      } 
     } 
} 

這是我的模板：

<input type="text" ng-model="myInputValue"> 

的問題是，我不能更新格式化插入的值後的視圖。例如，如果我寫「」我想通過這種方式改變參數值：

model.$formatters.push(function(value) { 
    return value + '00'; 
} 

替代我嘗試設置在此的其他方式的事件：

<input type="text" ng-model="myInputValue" ng-blur="onBlur()"> 

scope.onBlur = function() { 
    model.$viewValue = model.$viewValue + '00'; 
    // or model.$setViewValue(model.$viewValue + '00';); 
    model.$render(); 
}; 

的模型$ viewValue變化，myInputValue（在HTML與{{myInputValue}}）的變化，但不的值顯示在輸入框中 ...這是問題？謝謝！

---------------- UPDATE ----------------

也許這個問題是因爲我有2 ng模型（一個在HTML中，一個在模板中）：https://github.com/angular/angular.js/issues/9296

我該怎麼辦？這兩種型號都是指相同的型號...

Answer 1

格式化程序會更改模型值在視圖中的顯示方式。

解析器更改視圖值將如何保存在模型中。

//format text going to user (model to view) 
    ngModel.$formatters.push(function(value) { 
    return value.toUpperCase(); 
    }); 

    //format text from the user (view to model) 
    ngModel.$parsers.push(function(value) { 
    return value.toLowerCase(); 
    }); 

嘗試使用$解析器將視圖更改爲所需的值。

我希望這會幫助你。

更新：

angular.module('components', []).directive('formatParse', function() { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     scope: { model: "=ngModel" }, 
     template: '<input type="text" data-ng-model="model"></input><button type="button" data-ng-click="clickedView()">SetView</button><button type"button" data-ng-click="clickedModel()">SetModel</button>', 
     link: function ($scope, el, attrs, ngModelCtrl) { 

      format = "MMM Do, YYYY H:mm"; 
      console.log($scope.model); 
      console.log(ngModelCtrl); 

      $scope.clickedView = function() { 
       ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue); 
      }; 

      $scope.clickedModel = function() { 
        $scope.model = 12; // Put here whatever you want 
      }; 

      ngModelCtrl.$parsers.push(function (date) { 
       console.log("Parsing", date) 
       return date; // Put here the value you want to be in $scope.model 
      }); 

      ngModelCtrl.$formatters.push(function (date) { 
       console.log("Formatting", date); 
       console.log($scope.model); 
       console.log(ngModelCtrl); 
       return +date * 2; // Put here what you want to be displayed when clicking setView (This will be in ngModelCtrl.$viewValue) 
      }); 
     } 
    } 
}); 

angular.module('someapp', ['components']); 

嘗試使用此代碼，並告訴我們，如果這有助於讓你想要的結果。

如果是這樣，我建議，以console.log ngModelCtrl你的方式，你會更多地瞭解角度的​​內在流動。

另外，只要你有一些更多的信息，

當您編輯的格式化功能被解僱相應地更改模型視圖的輸入。

如果輸入的值無效，您可以在格式化程序函數中返回ngModelCtrl。$ viewValue以保留$ scope.model的舊信息和真實信息。

當您更改您的範圍變量（在您的情況下$ scope.model）解析器函數將被觸發以更改視圖值。 （你不需要使用$ render，你只需要決定什麼時候改變你的$ scope.model），我建議不要使用$ setViewValue把你想要的值放到你的scope變量中，解析器將會採取行動因此。