javascript - 我可以在自定义指令中以编程方式应用 Angular 验证指令吗？

Question

我发现很多 html 输入都出现以下模式，这是电话号码:

<input type="text" ng-model="CellPhoneNumber" required ng-pattern="/^[0-9]+$/" ng-minlength="10" />

我想创建一个自定义指令，无论在何处应用，它都会告诉 Angular 应用所有这三个规则，例如:

<input type="text" ng-model="CellPhoneNumber" bk-ng-validation="phoneNumber"/>

然后，我的指令中的代码会找到并调用一个名为 phoneNumber 的函数，我希望在其中看到如下内容:

list 1:

function bkNgPhoneNumber(model) {
    // This is purely SPECULATIVE pseudo-code, just to convey an idea.
    model.errors.add(applyMinLength(10, model));
    model.errors.add(applyMaxLength(15, model));
    model.errors.add(applyPattern("/^[0-9]+$/", model));
}

与“为这些规则重写代码”相比，我更喜欢上述方法，例如:

list 2:

function phoneNumber(model) {
    if (model.length < 10 || model.length > 15) {
        model.errors.add("Must be 10 to 15 chars!");
    }
}

我不想取消所有基于属性的指令，但最好创建一个“宏”指令来调用我的 list 1 代码，该代码将内部调用一组更多的“微”验证。

Answer 1

执行此操作的一种方法(即应用现有验证器而无需再次编写代码)是添加验证指令的相应属性并强制重新编译。这将要求您的指令具有足够高的优先级并且也是 terminal: true。

app.directive("bkNgValidation", function($compile){
  return {
    priority: 10000,
    terminal: true,
    link: function(scope, element){
      element.attr("ng-required", "true");
      element.attr("ng-minlength", 20);
      element.attr("ng-maxlength", 30);

      // prevent infinite loop
      element.removeAttr("bk-ng-validation");

      $compile(element)(scope);
    }
  };
});

Demo