我一直在尝试创建一个 AngularJS 指令，它将接受用户输入并将其显示为项目符号点，就像密码输入一样。

这是我目前所拥有的:

expose.link = function(scope, element, attributes, controller) {

    var maskValue = function(value) {
        // replace all characters with the mask character
        return (value || "").replace(/[\S]/g, "\u2022");
    }

    controller.$parsers.push(function(value) {
        return maskValue(value);
    });

}

这是做什么的:

View: asdf Model: ****

但我实际上需要它来执行此操作:

View: **** Model: asdf

我也试过这个:

controller.$formatters.push(function(value) {
    return maskValue(value);
});

但这只有在模型从我的代码中更改时才有效。 我需要它在用户输入字段时工作。

如果有一种方法可以手动触发 $formatters 运行，我觉得这可能会奏效，但我找不到执行此操作的方法。不过，我可能缺少一些明显的东西。

最佳答案

最终解决方案非常简单...

angular.module("core.application.main")
.directive("core.application.main.directive.mask",
    ["$compile",
    function($compile) {

        // Mask user input, similar to the way a password input type would
        // For example: transform abc123 into ******
        // Use this when you need to mask input, but without all the baggage that comes with the
        // 'password' input type (such as the browser offering to save the password for the user)
        //
        // ----- POSSIBLE USE CASE -----
        // CVC input field for a credit card
        //
        // ----- HOW IT WORKS -----
        // When the input field gains focus, it's cloned and the clone is changed to a 'password' type
        // The original input field is hidden at this point and the clone is shown
        // When the user types into the clone the real input field's model will be kept up to date
        // When the cloned input field loses focus, it's removed from the page and the original input
        // is shown. The model value is masked for display in this field using the $formatters

        var expose = {};
        expose.require = "ngModel";
        expose.restrict = "A";

        expose.link = function(scope, element, attributes, controller) {

            var maskedInputElement;

            var maskValue = function(value) {
                // replace all characters with the mask character
                return (value || "").replace(/[\S]/g, "\u2022");
            };

            var createMaskedInputElement = function() {
                if (! maskedInputElement || ! maskedInputElement.length) {
                    maskedInputElement = element.clone(true);
                    maskedInputElement.attr("type", "password"); // ensure the value is masked
                    maskedInputElement.removeAttr("name"); // ensure the password save prompt won't show
                    maskedInputElement.removeAttr("core.application.main.directive.mask"); // ensure an infinite loop of clones isn't created
                    maskedInputElement.bind("blur", function() {
                        element.removeClass("ng-hide");
                        maskedInputElement.remove();
                        maskedInputElement = null;
                    });
                    $compile(maskedInputElement)(scope);
                    element.after(maskedInputElement);
                }
            };

            element.bind("focus", function() {
                createMaskedInputElement();
                element.addClass("ng-hide");
                maskedInputElement[0].focus();
            });

            controller.$formatters.push(function(value) {
                // ensure the displayed value is still masked when the clone is hidden
                return maskValue(value);
            });

        };

        return expose;
    }
]);

以及对它的测试...

describe("Mask Directive", function() {
    var scope;
    var element;
    beforeEach(module("core.application.main"));
    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope.$new();
        /* jshint multistr: true */
        element = angular.element(" \
            <input name='cvc' type='text' ng-model='cvc' class='test' core.application.main.directive.mask> \
        ");
        $compile(element)(scope);
    }));

    it("should create a masked clone of the element when its focussed", function() {
        var clonedElement;
        element.triggerHandler("focus");
        clonedElement = element.next();
        expect(clonedElement.attr("type")).toEqual("password");
        expect(clonedElement.attr("name")).toEqual(null);
        expect(clonedElement.attr("core.application.main.directive.mask")).toEqual(null);
        expect(clonedElement.attr("ng-model")).toEqual("cvc");
        expect(clonedElement.hasClass("test")).toEqual(true);
        expect(element.hasClass("ng-hide")).toEqual(true);
    });

    it("should not create a masked clone if the mask has already been created", function() {
        expect(element.next().length).toEqual(0); // the clone shouldn't exist yet
        expect(element.next().next().length).toEqual(0); // another potential clone shouldn't exist yet
        element.triggerHandler("focus");
        expect(element.next().length).toEqual(1); // a clone should have been created
        element.triggerHandler("focus");
        expect(element.next().next().length).toEqual(0); // another clone should not have been created
    });

    it("should remove the masked input on blur and show the element", function() {
        var clonedElement;
        element.triggerHandler("focus");
        clonedElement = element.next();
        clonedElement.triggerHandler("blur");
        expect(element.next().length).toEqual(0);
        expect(element.hasClass("ng-hide")).toEqual(false);
    });

    it("should keep the element's model up to date based on the masked elements value", function() {
        var clonedElement;
        element.triggerHandler("focus");
        clonedElement = element.next();
        clonedElement.val("test").triggerHandler("input");
        expect(scope.cvc).toEqual("test");
        expect(element.val()).toEqual("••••");
    });

});

如果您想使用它，那么您需要将“core.application.main.directive.mask”重命名为您使用的任何命名空间方法。

一位同事质疑该指令的必要性，建议只使用不带“name”属性的普通密码字段……不幸的是有些东西需要“name”属性，否则该字段的验证将无法在 Angular 中工作.

关于javascript - 如何使用 Angularjs 指令屏蔽输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30724930/