AngularJS 的输入类型指令 = 监视变化的数字

Question

上下文：我正在开发我的应用的移动版本。我希望用户能够使用他们的手机/平板电脑的numeric keybord 输入数字字段。 AngularJS 使带有type = "number" 的输入字段对于任何非整数数据（这是任意的，因为输入是一个字符串）都无法访问。

想法：我想做一个指令，以某种方式（使用$watch 或$parsers 或任何其他古老的巫术）将输入字符串转换为数字。

问题：当我在输入字段中键入任何内容时，我的指令不会触发 $watch 的更改。 但是当我从我的控制器更改范围字段时，$watch 会按计划触发。

控制器：

        // code minimized and omitted for clarity
        .controller('carController', ['$scope', function ($scope) {
            $scope.car = {
                power : null,
                // other fields
            }
        }]);

指令

angular.module('numeric', []).directive('numeric', function () {
    return {
        restrict: 'A',
        require: 'ngModel',

        scope: {
            model: '=ngModel'
        },
        link: function (scope, element, attrs, ngModelCtrl) {
            // parsers does not affect anything
            ngModelCtrl.$parsers.push(function(value) {
                return parseInt(value);
            });

            // watcher does not watch
            scope.$watch('model', function(newVal, old) {
                if (typeof newVal == 'string') {
                    scope.car.power = parseInt(newVal);
                }
            }, true);

        }
    };
});

html

    <div ng-controller="carController">
     <input   
            ng-model="car.power"                      
            numeric
            name="power"
            type="number"
            pattern="[0-9]">
       </div>

这是一个演示这种行为的小提琴http://jsfiddle.net/xo94sw7m/1/

问题：我缺少什么以及如何使指令按计划工作？

我尝试过：使用 $formatters-$parsers，使用不同的 $watch 方法（使用scope:false，隔离范围，尝试使用attrs 等来观察范围变化），到目前为止似乎没有任何效果

Answer 1

myApp.directive('number', ['$parse', function($parse) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {

            ngModelController.$parsers.push(function(data) {
                return parseInt(data);
            });
            ngModelController.$formatters.push(function(data) {
                if (data) {
                    var model = $parse(attrs['ngModel']);
                    model.assign(scope, parseInt(data));
                }
                return parseInt(data);

            });
        }
    }
}]);

Here is working fiddle