我应该如何打包插件函数以用于验证指令？

I am working on the below validation directive, suggested to me in this answer:

我正在研究下面的验证指令,在这个答案中向我建议:

MyBigAngularApp.directive("bkNgValidation", function ($compile) {
    return {
        priority: 10000,
        terminal: true,
        link: function (scope, element, attrs) {

            var validationType = attrs.bkNgValidation;
            window["addValidationFor_" + validationType](element);

            // prevent infinite loop
            element.removeAttr("bk-ng-validation");
            $compile(element)(scope);
        }
    };
});

Then, when I apply this directive to an html element, in the form, bk-ng-validation="phoneNumber", my directive invokes this function:

然后,当我将此指令应用于html元素时,在表单中,bk-ng-validation =“phoneNumber”,我的指令调用此函数:

function addValidationFor_phoneNumber(element) {
    element.attr("ng-pattern", "/^[0-9]+$/");
    element.attr("ng-minlength", 5);
    element.attr("ng-maxlength", 8);
    alert("yeah baby");
}

This addValidationFor_phoneNumber is currently in the global namespace, just for my proof of concept, but I am looking to maybe use a revealing module to organize what could become quite a number of validation functions. Or is there some other pattern I should follow because I am working inside Angular? I suspect I could do something like declare a constant for the revealing module and inject it into the directive, but I thought I'd ask this question before going too far down the wrong road.

这个addValidationFor_phoneNumber目前在全局命名空间中,仅仅是为了我的概念证明,但我希望使用一个揭示模块来组织可能成为许多验证功能的东西。或者我应该遵循一些其他模式,因为我在Angular内部工作?我怀疑我可以做一些事情,例如为揭示模块声明一个常量并将其注入指令中,但我想我会在走错路之前问这个问题。

1 个解决方案

#1

Indeed it is generally not recommended to use variables from the global scope in Javascript, and an absolute anti-pattern when working with AngularJS.

实际上,通常不建议在Javascript中使用全局范围中的变量,并且在使用AngularJS时使用绝对反模式。

What you are looking for is a service (or factory, which does the same job in a slightly different syntax), which would be injected to your directive.

您正在寻找的是一个服务(或工厂,它以略微不同的语法执行相同的工作),它将被注入您的指令。

MyBigAngularApp.service('bkService', function() {
  this.phoneNumber   = function(element) { ... }
  this.somethingElse = function(element) { ... }
});

And your directive becomes:

你的指令变成:

// Note how bkService is injected to the directive in this first line
MyBigAngularApp.directive("bkNgValidation", function ($compile, bkService) {
  return {
    priority: 10000,
    terminal: true,
    link: function (scope, element, attrs) {

        var validationType = attrs.bkNgValidation;
        bkService[validationType](element);

        // prevent infinite loop
        element.removeAttr("bk-ng-validation");
        $compile(element)(scope);
    }
  };
});

Now if the only directive that will use this service is that one, you don't really need to create a service but can simply wrap all these functions as private methods from bkNgValidation:

现在,如果将使用此服务的唯一指令是那个,您实际上不需要创建服务,但可以简单地将所有这些函数作为私有方法从bkNgValidation包装:

MyBigAngularApp.directive("bkNgValidation", function ($compile) {

  var validations = {
    phoneNumber:   function(element) { ... }
    somethingElse: function(element) { ... }
  };

  return {
    priority: 10000,
    terminal: true,
    link: function (scope, element, attrs) {

        var validationType = attrs.bkNgValidation;
        validations[validationType](element);

        // prevent infinite loop
        element.removeAttr("bk-ng-validation");
        $compile(element)(scope);
    }
  };
});

#1