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

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（在HTML与{{myInputValue }}) 发生变化，但 不是输入框中显示的值 ... 问题出在哪里？谢谢！

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

问题可能是因为我有 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 的内部流程。

另外，顺便让大家多了解一些，

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

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

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

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

Value in ngModel not updated in Angular input view

formatting

input

angularjs

angular-template

angular-ngmodel