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

scope.$watch 在第一次加载/应用内容时应用掩码， element.bind 在其他时间应用掩码。scope.$watch 将符号（如果有的话）存储为 ng-model 变量的一部分。element.bind 不是。我认为 $setViewValue() 和 $render() 没有更新 ng-model 变量。正在更新的变量在哪里？

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

Answer 1

这里我们使用了$formatters.unshiftand $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

作为旁注

你也会发现这很有帮助：小提琴

Answer 2

在$watch“摘要”循环内执行。element.bind回调是从外部角度调用的，因此您必须添加显式调用scope.$apply()：

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

更新的小提琴

有关AngularJS 的事件循环的信息，请参阅文档。

Answer 3

您也可以简单地使用

ui-mask="{{'999,999,999°'}}"

Answer 4

通过将 modelCtrl.$parsers.push() { ... } 添加到我的 scope.$watch() { ... }，我能够让 ng-model 以我想要的方式存储值。

scope.$watch(element, function() {
    modelCtrl.$parsers.push(function(inputValue) {
        showAlert("Watch", 1);

        if (!prev) {
            prev = false;
            var returnVal = checkVal(inputValue, modelCtrl, decimals, true, minVal, maxVal);

            if (String(returnVal) === ".") {
                setAndRender(modelCtrl, "");
                return "";
            }
            else {
                return returnVal;
            }
        }
        return String(inputValue).replace(/[^0-9 . -]/g, '');
    });

    prev = true;
    setAndRender(modelCtrl, setFormatting(element.val(), decimals, attrs.prefix, attrs.symbol));
});