在另一个指令中嵌入指令时不会显示验证消息 [英] Validation messages are not getting displayed when trancluding a directive within another directive

问题描述

为了减少用于 html 验证的样板代码，我正在编写两个指令:一个用于模板，另一个用于验证……这两个指令都按预期工作，angularjs 验证类确实附加到无效的输入标签，唯一的问题是我面对作为模板指令一部分的验证消息没有显示.PLUNKER 链接

To reduce the boilerplate code for html validations i am writing two directives: one for templating and another for validations... both directives do work as expected and angularjs validation classes do get attached to the invalid input tags, only problem i am facing the validation messages which are part of templating directive are not getting displayed. PLUNKER LINK

问题似乎出在子元素的编译方式上:

The problem seems to be with the way child element is compiled:

element.replaceWith($compile(template)(scope));

这应该与父元素一起编译，但如何做到这一点?

this should rather get compiled with parent element but how to do that?

推荐答案

是的，你说得对，确实问题出在

yes you are right, indeed the problem is with

element.replaceWith($compile(template)(scope));

您在编译后将元素放在 dom 上，您正在执行反向操作，因此 ngmodel 不会更改将自身连接到父表单.

you are putting the element on dom after compiling it, you are doing reverse and hence the ngmodel does not get a change to hookup itself to the parent form.

你正在做的是:

1. create & compile element
2. place it in dom

因为元素在进入 dom 之前已经被编译过.它永远不会知道它的父表单，因此不会将自己链接到父表单.

as element is already compiled before making it to the dom.. it would never know of its parent form and hence wont link itself to the parent.

步骤顺序应该是:

1. create an element, 
2. place it in dom 
3. compile it. // now it will have a chance to hook up to the parent

所以你应该做的是:

   var el =angular.element(template);
   element.replaceWith(el);
   $compile(el)(scope);

检查 plunker 链接:http://plnkr.co/edit/hwyuuzeAnu5oBQqmmpR3?p=预览

check the plunker link: http://plnkr.co/edit/hwyuuzeAnu5oBQqmmpR3?p=preview

这篇关于在另一个指令中嵌入指令时不会显示验证消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！