CODEWITHSUNDEEP
angularjs
temporary_user_name
temporary_user_name

Reputation: 37018

Angular transclude not working as intended?

I am trying to do a very simple transclude causing a div with the text "hi" to appear after an input, just to see that it is working before moving forward. Here is the markup I am using the directive on:

 <input id="zipCodeField" validated-field />

The directive definition has transclude: true and uses this template:

<div>
    <div ng-transclude></div>
    <div>hi!</div>
</div>

I would expect the input element to be transcluded into where the ng-transclude is in the template. Instead, I am getting this result:

<input id="zipCodeField" validated-field>
    <div>
        <div ng-transclude></div>
        <div>hi!</div>
    </div>
</input>

What am I doing wrong here? This is in keeping with the examples I have seen.

Upvotes: 0

Views: 497

Answers (2)

mgilson
mgilson

Reputation: 309841

I think you're misunderstanding transclude. As I understand it, transclude takes the contents (think innerHTML) of the element and puts them inside the ng-transclude in the directive's template. It doesn't take the whole element itself (outerHTML).

So, in your example (assuming the directive is validated-field), you'd do:

<div validated-field>
    <input id="zipCodeField" />
</div>

This should result in the input getting dropped into the directive inside the ng-transclude element.

Upvotes: 1

Matthew
Matthew

Reputation: 736

I am not sure but at first sight shouldn't the directive template look like

   <div>
        <ng-transclude></ng-transclude>
        <div>hi!</div>
   </div>

?

https://docs.angularjs.org/api/ng/directive/ngTransclude

Upvotes: 0

Related Questions