javascript - ngModel $格式化程序不工作

Question

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

• 用 5.00 代替 5 初始化输入。

• 点击减号和加号按钮，设置小数点后两位小数的格式。

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

    }
  };

}]);

Answer 1

您向错误的 ngModel Controller 添加了解析器和格式化程序。关键是在这个例子中你有两个 ngModel Controller ，一个在指令上，一个在输入上，它们使用相同的模型。

为了格式化输入中的值，需要在输入的 ngModel Controller 上添加格式化程序。

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

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