我正在尝试为自定义输入组件创建一些自定义验证。
自定义输入的指令将充当黑盒子，因此我可以从控制器添加我想要的验证。
为此，我为指令添加了一个名为'validations'的属性，p.e。：
<custom-input validations="checkEmail() checkIsNotUsed()" type="text" placeholder="Email"></custom-input>
通过这个例子，我可以根据需要从控制器定义我的验证，并且想要当我想从控制器提交时，它将检查该组件是否被验证为'checkEmail（）'和'checkIsNotUsed（ ）”。要做到这一点，我需要在控制器和内部指令之间进行一些双向通信，例如：使用电子邮件：
我尝试过不同的方法，但我无法达到最终目标。
Here is the example I've been working with
修改
答案 0 :(得分：1)
我会稍微质疑你是否需要将指令作为一个完整的黑盒子。首先，通常您需要一些验证消息或向用户显示有关无效数据的不同情况的一些信息，因此只有任何验证器的真/假返回值是不够的。其次，您还重新创建了Angular已经为您提供的ngForm，ngModel，ngModelController和input指令，特别是{{1} } $setValidity
我会将每个验证器放在自己的ngModelController s require指令中：一个用于电子邮件，一个用于密码。但是，您仍然可以从整个控制器传递选项，但每个指令都是根据所需的信息量身定制的。例如，ngModel指令可以接受使用的现有电子邮件数组：
validationEmail <input validation-email validation-email-used="usedEmails" ng-model="data.email" type="text" placeholder="Email" name="email" ng-required />
是一组电子邮件。该指令可以写成：
usedEmails您可以在modified version of your Plunker
中查看此操作编辑：如果要与服务器端验证集成，一旦从指令传递了所有客户端验证，就可以从表单上传递给app.directive('validationEmail', function() {
return {
require: 'ngModel',
scope: {
validationEmailUsed:'='
},
link: function(scope, element, attributes, ngModelController) {
scope.$watch(function() {
return ngModelController.$viewValue
}, function(email) {
// Test the email and call
// ngModelController.$setValidity(...)
// to set the validity of the email
});
}
};
});
的函数执行此操作：
ngSubmit可以使用表单在作用域上展示自身的事实及其所有<form name="myForm" ng-submit="submit()">
控制器（对于相同的示例，使用ngModel进行编码，而不是调用$timeout或服务），
$http这个问题是您可能希望在用户更改后将输入标记为有效。您可以创建一个$scope.submit = function() {
$timeout(function() {
$scope.myForm.username.$setValidity('available',false);
$scope.myForm.email.$setValidity('emailFree',false);
},500);
}
指令，用作：
validOnChange并编码为：
<input ng-model="data.username" type="text" placeholder="Username" name="username" valid-on-change="available" ng-required />
使用ngForm和ngModelController的另一个一般好处是它根据输入的错误/有效状态向表单和元素添加了很多类，并在作用域上公开了错误状态，因此您可以显示/例如，使用app.directive('validOnChange', function() {
return {
require: 'ngModel',
scope: '',
link: function(scope, element, attributes, ngModelController) {
scope.$watch(function() {
return ngModelController.$viewValue
}, function() {
ngModelController.$setValidity(attributes.validOnChange,true);
});
}
}
});
轻松隐藏错误消息。