ngModel $ formatters無法正常工作

Question

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

    } 
    }; 

}]); 

Answer 1

你是在加入解析器和格式化的錯誤ngModel控制器。問題是，在這個例子中，你有兩個ngModel控制器，一個在指令上，另一個在輸入上，他們使用相同的模型。

需要在輸入的ngModel控制器上添加格式器，以便格式化輸入中的值。

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

另一件也是錯誤的是，輸入是數字類型而不是文本。你可以檢查更新的Plunker here。