Как я должен упаковать функции плагина для использования в директиве проверки?

Question

Я работаю на директивы проверки ниже, предложил мне в 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); 
     } 
    }; 
}); 

Тогда, когда я применяю эту директиву к 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); 
    } 
    }; 
});