Question

我是Angular的新手。在这个简单的例子中，我预计会有两种行为：

使用5.00而不是5来初始化输入。
格式化数字，带有2个小数位数，点击减号并添加按钮。

没有任何作用，但我没有弄清楚问题。

这里使用指令

<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控制器中。问题是在这个例子中你有两个ngModel控制器，一个在指令上，一个在输入上，它们使用相同的模型。

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

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

另一个错误的是输入的类型是数字而不是文本。您可以查看更新的Plunker here。

ngModel $格式化程序无效

1 个答案: