Binding Directives after Dynamically Creating an Element in AngularJS

Question

I have a code that dynamically create elements (the x and the parentDiv).

var x = document.createElement('myTag');
parentDiv.appendChild(x);

And I have a directive that looks like this:

.directive("myTag", function($compile) {
    return {
        restrict: "E",
        replace: true,
        template: "<span><img src='something/url/img.png'></img></span>"
    }
})

How can I replace the myTag tag into that code in the directive? I am aware of using $compile so that the code outside of AngularJS can be covered under its scope but I do not know where to put that.

Where are you creating this element? Outside of angular context? In a controller? In a factory? — devqon
– devqon, Commented Jan 18, 2017 at 9:43
@Maximus hi. yes. sorry i was a bit today but it works like a charm. thanks! :D — Fealrone Alajas
– Fealrone Alajas, Commented Jan 19, 2017 at 9:13

Max Koretskyi · Accepted Answer · 2017-01-18 07:13:56Z

1

Actually, you should use compile before appending your element:

var childScope = scope.$new();
var x = document.createElement('myTag');
var compiled = $compile(x)(childScope);
parentDiv.appendChild(compiled);

The $compile service will fetch the template:

<span><img src='something/url/img.png'></img></span>

and put it inside the DOM element referenced with x.

answered Jan 18, 2017 at 7:13

Max Koretskyi

106k68 gold badges356 silver badges522 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding Directives after Dynamically Creating an Element in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related