AngularJS指令数字格式屏蔽

Question

我创建的指令使用函数setFormatting来屏蔽输入字段中的文本值.

scope.$watch(element, function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
});

element.bind('blur', function() {
    modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
    modelCtrl.$render();
});

范围.$ watch在第一次加载/应用内容时应用蒙版,element.bind为其他时间应用蒙版.范围.$ watch存储符号(如果有的话)作为ng-model变量的一部分.element.bind不是.我以为$ setViewValue()和$ render()没有更新ng-model变量.变量在哪里更新？

请参阅随附的小提琴:http ://jsfiddle.net/PJ3M4/
谢谢.

Answer 1

在这里我们使用$formatters.unshift和$filter:

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
    $scope.test = 123456879;
});
fessmodule.$inject = ['$scope'];

fessmodule.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            var symbol = "°"; // dummy usage

            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue) +  symbol;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter('number')(plainNumber) + symbol);
                return plainNumber;
            });
        }
    };
}]);

HTML

 <input type="text" ng-model="test" format="number"/>

演示 Fiddle

作为旁注

你也可以找到这个有用的:小提琴