Question

我需要格式化输入值，因此我创建了一个使用 require：＆＃39; ngModel＆＃39; 的模板的指令，因为我必须使用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">

问题是我在格式化插入的值后无法更新视图。例如，如果我写＆＃39; 1 ＆＃39;我想用这种方式改变价值：

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 （在带有 {{myInputValue}} 的HTML中）更改但不是输入框中显示的值 ...这是什么问题？谢谢！

----------------的更新 ----------------

问题可能是因为我有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();
  });

尝试使用$ 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。

此外，您还可以获得更多信息，

在视图中编辑输入时，将触发格式化程序功能以相应地更改模型。

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

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

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

1 个答案: