Javascript 带有输入元素的 AngularJS 自定义指令，从外部传递验证器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28045427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS custom directive with input element, pass validator from outside
提问by qqilihq
I'm using a simple custom directive for a modified input field which occurs throughout my application:
我正在使用一个简单的自定义指令来修改我的应用程序中发生的输入字段：
app.directive('editor', function() {
return {
restrict: 'E',
templateUrl: 'editor.html',
scope: { value: '=' }
};
});
The editor.htmlbasically creates an inputelement with additional controls. Simplified it looks like this:
所述editor.html基本上创建一个input与附加控制元件。简化后看起来像这样：
<div>
<input ng-model="value">
<!-- more code here -->
</div>
I access my directive using <editor value="{{object.name}}"></editor>. This works perfect. Now I need to perform different validations on the input. The necessary validators to use vary, so I would like to be able to pass the actual validators to my directive. Something like:
我使用<editor value="{{object.name}}"></editor>. 这工作完美。现在我需要对输入执行不同的验证。使用的必要验证器各不相同，因此我希望能够将实际验证器传递给我的指令。就像是：
<editor value="{{object.name}}" validator-a validator-b></editor>
or
或者
<editor value="{{object.name}}" validators="validatorA,validatorB"></editor>
How could I achieve that?
我怎么能做到这一点？
回答by New Dev
You are creating a custom input control, so you might as well support ng-model- which is the right thing to do.
您正在创建自定义输入控件，因此您不妨支持ng-model- 这是正确的做法。
And, validators - built-in and custom - only require: "ngModel"for their function and they are independent (by design) from the underlying DOM implementation, so having ng-modelautomatically supports all ng-model-based validators.
并且，验证器 - 内置和自定义 - 仅require: "ngModel"用于它们的功能，并且它们（按设计）独立于底层 DOM 实现，因此具有ng-model自动支持ng-model基于所有的验证器。
Having ng-modelsupport will also make your directive participate in formvalidation.
获得ng-model支持还将使您的指令参与form验证。
Since you are using an existing directive inside the template (i.e. <input>), you don't even need to bother with DOM, as you would've had you built something from scratch.
由于您在模板中使用了现有指令（即<input>），您甚至不需要操心 DOM，因为您已经从头开始构建了一些东西。
app.directive("editor", function(){
return {
require: "?ngModel",
scope: true,
template: "<input ng-model='value' ng-change='onChange()'>",
link: function(scope, element, attrs, ngModel){
if (!ngModel) return;
scope.onChange = function(){
ngModel.$setViewValue(scope.value);
};
ngModel.$render = function(){
scope.value = ngModel.$modelValue;
};
}
};
});
Then you can just apply validators directly:
然后你可以直接应用验证器：
<editor ng-model="foo" minlength="3"></editor>
