我的ngMessages在我的指令模板中不起作用！
我有一个带有模板和链接函数的指令myInput,在模板函数中我为包装的< label>创建了模板字符串.和< input>.
在Link函数内部,我使用require：’^ form’FormController并检索表单名称.然后我在包装元素之后放置一个ngMessages块.
(function () {
'use strict';
angular
.module('app.components')
.directive('myInput',MyInput);
/*@ngInject*/
function MyInput($compile,ValidatorService,_,LIST_OF_VALIDATORS) {
return {
require: '^form',restrict: 'E',controller: MyInputController,controllerAs: 'vm',bindToController: true,template: TemplateFunction,scope: {
label: '@',id: '@',value: '=',validateCustom: '&'
},link: MyInputLink
};
function MyInputController($attrs) {
var vm = this;
vm.value = '';
vm.validateClass = '';
vm.successMessage = '';
vm.errorMessage = '';
}
function TemplateFunction(tElement,tAttrs) {
return '<div class="input-field">' +
' <label id="input_{{vm.id}}_label" for="input_{{vm.id}}" >{{vm.label}}</label>' +
' <input id="input_{{vm.id}}" name="{{vm.id}}" ng-class="vm.validateClass" type="text" ng-model="vm.value" >' +
'</div>';
}
function MyInputLink(scope,element,attrs,form){
var extra = ' <div ng-messages="' + form.$name + '.' + scope.vm.id + '.$error">' +
' <div ng-messages-include="/modules/components/validationMessages.html"></div>' +
' </div>';
$(element).after(extra);
}
}
})();
用法：
<h1>Test</h1>
<form name="myForm">
<my-input label="My Input" id="input1" value="vm.input1"></my-input>
-------
<!-- this block is hardcoded and is working,it does not come from the directive! -->
<div ng-messages="myForm.input1.$error">
<div ng-messages-include="/modules/components/validationMessages.html"></div>
</div>
</form>
解决方法
不是在链接函数中添加ngMessages块,而是在compile函数中添加它.
由于缺少FormController,它不像链接功能那样方便,但它的工作原理:-)
这里的代码：
compile: function(tElement,tAttrs){
var name = tElement.closest('form').attr('name'),fullFieldName = name + '.' + tAttrs.id; // or tAttrs.name
var extra = '<div ng-messages="' + fullFieldName + '.$error">' +
' <div ng-messages-include="/modules/components/validationMessages.html"></div>' +
'</div>';
$(element).after(extra);
