编译自定义指令

我想在其他自定义指令内动态添加自定义验证指令。它适用于像“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' 指令工作。

感谢您的任何答案！

来源

2014-07-08 Lubov Vashpa ova

任务是通过http请求和表单字段的描述来构建表单。字段示例json是{type：'text'，value：'[email protected]'，名称：'email'}。验证规则，我们可以通过字段“name”来定义 –

我认为你必须要求：'ngModel'，因为在文档中它说：定义你自己的验证器可以通过定义你自己的指令来添加一个自定义验证函数到ngModel控制器。 – Lrrr

是的，我做到了： 'app.directive（ 'testValidation'，函数（）{ 回报{ 限制： 'A'，要求： 'ngModel'， ... }' 或者你的意思是别的吗？ –

编辑：

我建议你在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一个包含匹配结果的数组，如果没有匹配，则返回null。

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

来源

2014-07-08 07:00:21 Mosho

谢谢，修复它。但问题仍然存在。这个指令工作的很好，如果像这样添加''input test-validation =“true”required ng-model =“var2”/>'，但如果应用'$ compile（elem.contents（）） ;'改变输入的属性后。 –

nvm，我现在看，在它上面 – Mosho

@LubovVashpaova编辑。 – Mosho

编译自定义指令

回答

相关问题