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

Question

我正在研究以下验证指令，在 :

中向我建议

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

然后，当我将此指令应用于 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");
}

这个 addValidationFor_phoneNumber 目前在全局命名空间中，仅用于我的概念验证，但我希望使用一个揭示模块来组织可能成为大量验证函数的内容。还是因为我在 Angular 内部工作，所以我应该遵循其他模式？我怀疑我可以做一些事情，比如为显示模块声明一个常量并将其注入指令，但我想我会在走错路之前问这个问题。

Answer 1

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

您正在寻找的是 service（或 factory，它以略微不同的语法完成相同的工作），它将被注入到您的指令中。

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

您的指令变为：

// 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);
    }
  };
});

现在，如果使用此服务的唯一指令是那个指令，那么您实际上不需要创建服务，只需将所有这些函数包装为 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);
    }
  };
});

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

How should I package plugin functions for use in a validation directive?

javascript

angularjs

revealing-module-pattern