Validation messages are not getting displayed when trancluding a directive within another directive

问题

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?

回答1:

yes you are right, indeed the problem is with

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

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.

what you are doing is:

1. create & compile element
2. place it in 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.

the sequence of step should have been:

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

so what you should rather do is:

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

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

来源：https://stackoverflow.com/questions/22854581/validation-messages-are-not-getting-displayed-when-trancluding-a-directive-withi