ngModel 中的值未在 Angular 输入视图中更新

Question

我需要格式化输入值，因此我创建了一个指令，该指令使用带有 require: 'ngModel' 的模板，因为我必须使用 ngModelController 函数（ $parsers、$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">

问题是在格式化插入的值后我无法更新视图。例如，如果我写 '1' 我想以这种方式更改值：

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

model.$viewValue 发生变化，myInputValue（在带有 {{myInputValue}} 的 HTML 中）发生变化，但 不是输入框中显示的值...这是什么问题？谢谢！

----------------更新----------------

问题可能是因为我有 2 个 ng-model（一个在 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();
  });

尝试使用 $parsers 将视图更改为您想要的值。

希望对你有帮助。

更新：

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，您将更多地了解 angular 的内部流程。

另外，只是为了让您了解更多信息，

当您在视图中编辑输入时，格式化函数会被触发以相应地更改模型。

如果输入的值无效，您可以在格式化程序函数中返回 ngModelCtrl.$viewValue 以保留 $scope.model 的旧信息和真实信息。

当您更改范围变量（在您的情况下为 $scope.model）时，解析器函数将被触发以更改视图值。 （您不需要使用 $render，您只需要决定何时更改 $scope.model）， 我建议不要使用 $setViewValue 将你想要的值放在你的范围变量中，解析器会相应地采取行动。