javascript - Parent directive transclusion does not work when content generated by child directive -

i have 2 directives outer 1 using transclusion. should attaching attr content inside outer directive being generated inner directive attach attr not seem work:

plunker link 1

i getting error:

typeerror: cannot read property 'childnodes' of undefined

which assume has this.

if don't use inner directive , manually place html in outer directive generated inner directive, works fine:

plunker link 2

the use case here have 2 directives. 1 of them in search query component lets build search specific syntax , validates type letting know if have syntax errors. have extend text component 1 of features in auto complete. both of these components work fine separately try combine functionality can have query builder auto complete. running issue none of functionality of extend text component being added search query component (just none of functionality of outer directive being added inner directive here).

is there doing wrong here (why getting childnodes error)? not way combine functionality of 2 directives each have there own templates?

note

• this base bone code example showing same issue having real code. real code on 1000 lines long extend text , search query components combined not posting since there ton of code not related specific issue. while in example bind event in javascript, won't real code. solution needs allow me able bind directives in transclusion process of outer directive.
• i have tried transclude: 'element' instead of transclude = true when input not show on page
• i though trying make have both directives on same element both require there own templates far know have have directives on separate elements

update

based on @zeroflagl suggestion, removed used on $compile still not work

plunker link 3

the input have ng-click , there no more javascript error clicking input not trigger alert.

element.find('.outer-inputs').append($compile(copyelement)($scope));

you don't need $compile.

compile: function(element, attributes, transclude) {

the use of transclude in compile function deprecated.

working example:

compile: function(element, attributes) {           return {             pre: function($scope, element, attributes) {             },             post: function($scope, element, attributes, ctrl, transclude) {               transclude($scope, function(clone) {                 var copyelement = clone.filter('.outer-copy');                  copyelement.find('input').on('click', function() {                   focus();                   //$scope.$apply();  if change model.                 });                  element.find('.outer-inputs').append(copyelement);               }); 

not related problem: directive's controller useless, has no methods. can add focus() scope directly in directive.

edit

in example compile element has been compiled , still under construction (the post-link phase). that's not going work. try change inner directive. either directives idependent, outer shouldn't mess inner, or aware of each other. in case there's no need hacking dom interoperate in other ways.