我有一组常用的表单输入，可以在我的应用程序中重复使用，因此我尝试将它们封装在自定义指令中。我想在我的指令上设置一个ngModel，并在主指令中将它分成可编辑的几个不同的输入（其中一些是指令本身）。
同时，我需要将表单验证结果向上传递到父表单，以便我可以显示相应的消息和样式。
实施此操作的最简单，最惯用的方式是什么？
这些（简化的）模板应该给你一个我想要的例子......
<form name="outerForm">
<my-directive
ng-model="ctrl.myComplexModel"
name="myDirectiveInstance"
custom-required="ctrl.EnableValidateOne"
toggle-another-validation="ctrl.EnableValidateTwo">
</my-directive>
<div ng-messages="outerForm.myDirectiveInstance.$error">
<ng-message when="customRequired">This is required.</ng-message>
<ng-message when="anotherValidation">This is required.</ng-message>
<ng-message when="innerValidationOne">Something wrong with field 1.</ng-message>
<ng-message when="innerValidationTwo">Something wrong with field 2.</ng-message>
<ng-message when="innerValidationThree">Something wrong with field 3.</ng-message>
<!-- etc... -->
</div>
</form>
<div ng-form="myDirectiveForm">
<div ng-class="{'has-error': myDirectiveForm.fieldOne.$invalid}">
<ui-select
ng-model="model.fieldOne"
name="fieldOne"
required>
</ui-select>
</div>
<div ng-class="{'has-error': myDirectiveForm.fieldTwo.$invalid}">
<input
type="number"
ng-model="model.fieldTwo"
name="fieldTwo"
ng-pattern="directiveCtrl.someRegEx"
ng-required="directiveCtrl.fieldTwoIsRequired">
</div>
<!-- etc... -->
</div>
目前，myDirectiveForm和myDirectiveInstance都将自己发布为outerForm FormController的属性。我希望将这个指令变成一个黑盒子，所以myDirectiveForm直接附加到outerForm的事实困扰着我，似乎表明我做错了什么。
这是我的指令定义现在的样子。
app.directive('myDirective', function() {
return {
restrict: 'E',
template: 'myDirectiveTemplate.html',
controller: 'MyDirectiveCtrl',
scope: {
model: '=ngModel',
customRequired: '=?',
toggleAnotherValidation: '=?'
},
require: 'ngModel',
link: function(scope, iElem, iAttrs, ngModelController) {
// Black-box the internal validators
// Custom validator to avoid conflicts with ngRequired
ngModelController.$validators.customRequired = function(modelValue, viewValue) {
if(!scope.customRequired)
return true;
// On first digest the field isn't registered on the form controller yet
if(angular.isUndefined(scope.myDirectiveForm.fieldOne))
return true;
return !scope.myDirectiveForm.fieldOne.$error.required;
};
ngModelController.$validators.anotherValidation = function(modelValue, viewValue) {
if(!scope.anotherValidation)
return true;
return scope.passesBusinessRule();
};
ngModelController.$validators.innerValidationOne = function(modelValue, viewValue) {
if(!scope.anotherValidation)
return true;
if(angular.isUndefined(scope.myDirectiveForm.fieldTwo))
return true;
return !scope.myDirectiveForm.fieldTwo.$error.pattern;
};
/* etc... */
// Deep-watching model so that validations will trigger on updates of properties
scope.$watch('model', function() {
ngModelController.$validate();
}, true);
}
};
});
答案 0 :(得分：0)
这就是我理解指令的方式。在这种情况下，ng-model和myDirective都是指令。我不清楚，如果你正在做一个
1）ng-model OR上的包装器 2）自定义指令
因为如果你想做自定义指令，你可以直接传入数据，例如。
{scope：{data：'='}
如果你想做一个包装器，你可能不应该传入与ngModel相关的其他属性，这意味着你仍然可以传入数据
ctrl.myComplexModel，顺便说一下。模型对象不能分配给ng-model，因为ng-model不包含对象，它只保存数据。
注意：实际上我发现了这篇文章AngularJS - Create a directive that uses ng-model
显然，你可以通过模型， https://docs.angularjs.org/api/ng/type/ngModel.NgModelController无论如何，这对我来说太复杂了:)如果你想制作一个包装，我觉得这个模式
但显然你可能正在做“是一个”对象。
答案 1 :(得分：0)
我找到了一个不错的解决方案。简而言之，我已从我的自定义指令中删除了NgModelController实现，而我完全依赖于自定义指令中FormController指令的内部form。据我所知，NgModelController并不是设计为包装自定义指令中的表单。但是，在Angular中支持嵌套表单非常好，所以这是可行的方法。
我没有意识到的是，您可以从Angular 1.3开始动态地为表单指定名称。虽然我无法阻止“黑匣子”泄漏并将其自身附加到父窗体控制器，但我至少可以控制它用于在父范围内发布自身的名称，这是可接受的并且与API非常相似由ngModel提供。
以下更新的示例。
<form name="outerForm">
<my-directive
model="ctrl.myComplexModel"
name="myDirectiveInstance"
custom-required="ctrl.EnableValidateOne"
toggle-another-validation="ctrl.EnableValidateTwo">
</my-directive>
<div>
<span ng-if="outerForm.myDirectiveInstance.fieldOne.$error.required">Internal field 1 is required.</span>
<span ng-if="outerForm.myDirectiveInstance.fieldTwo.$error.required">Internal field 2 is required.</span>
<span ng-if="outerForm.myDirectiveInstance.fieldTwo.$error.pattern">Internal field 2 format error.</span>
<!-- etc... -->
<ng-messages for="outerForm.myDirectiveInstance.$error">
<ng-message when="required">At least one required field is missing.</ng-message>
<ng-message when="custom">
Some directive-wide error set by validate-custom on outerForm.myDirectiveInstance.internalField
</ng-message>
<!-- etc... -->
</ng-messages>
</div>
</form>
在外部模板中，我删除了ng-model指令，转而使用自定义属性。 name属性仍可用于确定内部表单的发布名称。
或者，可以保留ng-model，并且可以使用属性form-name（对下面的隔离范围绑定进行适当更改）将自定义指令的FormController发布到父FormController，但这可能有些误导，因为ng-model指令除了隔离范围绑定之外没有用于任何东西。
无论哪种方式，ng-model都不应与此用例的name属性一起使用。否则，NgModelController和FormController尝试将自己发布到同一属性名称（FormController下的父outerForm（outerForm.myDirectiveInstance）时可能会发生冲突）。
由于验证错误冒泡到父form指令，ngMessages可能与此自定义指令一起使用，如图所示。对于更细粒度的错误处理，也可以访问指令的内部字段。
<div ng-form="{{ formName }}">
<div ng-class="{'has-error': isInvalid('fieldOne')}">
<ui-select
ng-model="model.fieldOne"
name="fieldOne"
required>
</ui-select>
</div>
<div ng-class="{'has-error': isInvalid('fieldTwo')}">
<input
type="number"
ng-model="model.fieldTwo"
name="fieldTwo"
ng-pattern="directiveCtrl.someRegEx"
ng-required="directiveCtrl.fieldTwoIsRequired">
</div>
<!-- etc... -->
<input
type="hidden"
ng-model="someCalculatedValue"
name="internalField"
validate-custom>
</div>
指令的内部模板大致保持不变。最大的区别是ngForm的名称现在是动态设置的。
要使用ngClass处理它，角度表达式将不起作用，因此我更新了我的示例以使用$scope上的函数。
最后，对于指令范围的业务规则，我使用了带有ngModel指令和name集的隐藏输入。我附上了一个自定义迷你指令，用于验证这个领域。此字段的验证错误将冒出来由父指令使用。
app.directive('myDirective', function() {
return {
restrict: 'E',
template: 'myDirectiveTemplate.html',
controller: 'MyDirectiveCtrl',
scope: {
model: '=',
customRequired: '=?',
toggleAnotherValidation: '=?',
formName: '@name'
},
};
});
现在几乎所有逻辑都已从指令定义中删除。