Question

使用ngModel。$ formatters和ngModel。$ parsers我正在尝试创建一个指令来将数据类型从模型更改为视图，反之亦然。

问题是当我使用<input type="number">时在这种情况下，toView接收'undefined'作为值，但不接收字符串数据。（ “1234”）

如果我删除type = number工作正常，但输入元素不是我想要的。

有什么方法可以让它发挥作用吗？

如果没有，还有另一种方法来实现这一目标吗？（模型必须是字符串，输入必须是type =“number”）

的javascript

var app = angular.module('module', []);

app.controller('MainCtrl', function($scope) {
  $scope.model = {};
  $scope.model.number = "1234";
});

app.directive('numberConverter', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: {
      pre: function(scope, element, attr, ngModel) {

        function toModel(value) {
          return "" + value; // convert to string
        }

        function toView(value) {
          return parseInt(value); // convert to number
        }

        ngModel.$formatters.unshift(toView);
        ngModel.$parsers.unshift(toModel);
      },
      post: function() {}
    }
  };
});

html

<input type="number" number-converter ng-model="model.number">

Answer 1

对不起，我原来的回答并不是很正确。

这是一个更新的指令，它将值正确地存储为字符串，但将其编辑为数字。

指令的优先级大于0（默认优先级），以便在ngModel指令执行后运行，这一点非常重要。这样可以确保您在默认设置之后添加格式化程序和解析器（否则您只需要推送到空列表，并且无论如何都会添加默认处理器）。

app.directive('numberConverter', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1,
        link: function(scope, element, attr, ngModel) {

            function toModel(value) {
                return "" + value; // convert to string
            }

            function toView(value) {
                return parseInt(value); // convert to number
            }

            ngModel.$formatters.push(toView);
            ngModel.$parsers.push(toModel);
        }
    };
});

更新了plunkr：http://plnkr.co/edit/l8c1GGBeIX4dawLZJfoC?p=preview

angular：如何使用$ formatters和$ parsers更改数据类型？

1 个答案: