1

この回答で提案されている以下の検証ディレクティブに取り組んでいます。

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 内で作業しているため、従うべき他のパターンはありますか? 公開モジュールの定数を宣言してそれをディレクティブに挿入するようなことができると思いますが、間違った道を進む前にこの質問をしたいと思いました。

4

1 に答える 1

0

実際、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);
    }
  };
});
于 2015-05-13T22:13:12.650 に答える