angularjs – ngMessages在指令模板中不起作用
发布时间:2020-12-17 18:04:24 所属栏目:安全 来源:网络整理
导读:我的ngMessages在我的指令模板中不起作用! 我有一个带有模板和链接函数的指令myInput,在模板函数中我为包装的 label创建了模板字符串.和 input. 在Link函数内部,我使用require:’^ form’FormController并检索表单名称.然后我在包装元素之后放置一个ngMess
我的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); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |