Question

我正在尝试在其他自定义指令中动态添加自定义验证指令。它适用于像“required”这样的系统角度指令，但不适用于自定义验证指令。

我有输入的指令'controlInput'，我在其上动态添加指令'testValidation'（在实际应用中依赖于控制输入的数据）。

<control-input control-data='var1'></control-input>

指令：

app.directive('controlInput', function ($compile) {
  return {
    restrict: 'E',
    replace: true,
    template: '<div><input type="text" ng-model="var1"></div>',
    link: function (scope, elem, attrs) {

      var input = elem.find('input');
      input.attr('required', true);
      input.attr('test-validation', true);
      $compile(elem.contents())(scope);
    }
  };
});
app.directive('testValidation', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
      ctrl.$parsers.unshift(function (value) {
        if (value) {
          var valid = value.match(/^test$/);
          ctrl.$setValidity('invalidTest', valid);
        }
        return valid ? value : undefined;
      });
    }
  };
});

完整示例http://plnkr.co/edit/FylMfTugHrotEMSQyTfT?p=preview

在这个例子中，我还添加了简单的输入，以确保'testValidation'指令正常工作。

感谢您的回答！

Answer 1

修改

我建议您通过将controlInput指令中的模板更改为：
来修复原始程序
template: '<div><input type="text" testdir required ng-model="var1"></div>'

我不明白为什么不按上面提到的那样做，但另一种方法是用新编译的输入替换输入：

input.replaceWith($compile(elem.html())(scope));

注意：

更改

var valid = value.match(/^test$/);

要

var valid = /^test$/.test(value);

来自MDN：

String.prototype.match()


返回值

array包含匹配结果的Array;如果没有，则返回null   匹配。

RegExp.prototype.test()返回你需要的东西，一个布尔值。

编译自定义指令

1 个答案: