javascript - ngModel $ formatters不起作用

我是Angular的新手。在这个简单的示例中，我期望两种行为：


用5.00代替5.初始化输入。
用减号和加号按钮将数字格式化为2个小数位数。


Plunker

没有任何效果，但我不知道问题所在。

这里使用指令

<number-input ng-model="number"></number-input>

这里的指令

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
  $scope.number = 5;
});

app.directive('numberInput', ['$filter',function ($filter){
  return {
    require: 'ngModel',
    restrict: 'AE',
    template: '<input type="number" ng-model="number"/>
    <button type="button" ng-click="increment()">+</button>
    <button type="button" ng-click="decrement()">-</button>',
    link: function(scope, element, attrs, ngModelCtrl) {

      var input = element.find('input');

      ngModelCtrl.$render = function() {
      };

      scope.increment = function() {
        updateValue(+1);
      };

      scope.decrement = function() {
        updateValue(-1);
      };

      function updateValue(value) {
        ngModelCtrl.$setViewValue(ngModelCtrl.$modelValue + value);
        ngModelCtrl.$render();
      }

      ngModelCtrl.$parsers.push(function(value) {
        return parseFloat(value);
      });

      ngModelCtrl.$formatters.push(function (value) {
        return $filter('number')(value, 2);
      });

    }
  };

}]);

最佳答案

您正在将解析器和格式化程序添加到错误的ngModel控制器。问题在于，在此示例中，您有两个ngModel控制器，一个在指令上，一个在输入上，它们使用相同的模型。

需要在输入的ngModel控制器上添加格式化程序，以便对输入中的值进行格式化。

var inputModelCtrl = element.find('input').controller('ngModel');

另外一件错误的事情是输入是数字类型而不是文本类型。您可以检查更新的柱塞here。

关于javascript - ngModel $ formatters不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32668303/