add an angularjs material element via a directive's link function

Question

I'm trying to add the material angularjs md-input-container to the DOM via a directive's compile function as following :

element.after(`
    <md-input-container md-theme-watch="true" flex>
        <label for="sampletext1">Champ texte</label>
        <input name="sampletext1" type="text"
               class="ng-tree-search">
    </md-input-container>
`)

But when I open the page, the element looses it's default behaviour and looks like this :

Instead it should look like this :

This only works when I add the element in the html, but in my case I want to add it via the link function of the directive that creates that treeview.

Why on Earth would you want to do that? Don't add elements with AngularJS directives in the DDO compile function. Instead find another way to achieve what you want. — georgeawg
– georgeawg, Commented Aug 1, 2017 at 16:18
Any error on console? Because I've tried with simplest example, it seems to be working fine.. There's possibility that treeview directive's compile function (has some error & thus) failing. Can you show the directives code in which you're performing above operation? — Shantanu
– Shantanu, Commented Aug 1, 2017 at 18:54

Shantanu · Accepted Answer · 2017-08-01 19:12:57Z

1

You need to compile the element's template first in link function of directive. This's how you can do that:

var elemHtml = `
            <md-input-container md-theme-watch="true" flex>
                <label for="sampletext1">Champ texte</label>
                <input name="sampletext1" type="text"
                       class="ng-tree-search">
            </md-input-container>
        `;
element.after($compile(elemHtml)(scope));

Don't forget to pass the $compile in function of the directive.

Working Plunker link: https://plnkr.co/edit/dKjanhRioFWtWcm4Hoki?p=preview

In question you said you've that in compile function but in title you're saying link function. Actually in compile function you don't need to use $compile in above case. (But if it's inside link function it's needed).

Example of having that inside compile function: https://plnkr.co/edit/By9Io583s6ZxffLyrHTt?p=preview

answered Aug 1, 2017 at 19:12

Shantanu

3,5332 gold badges21 silver badges22 bronze badges

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

1 Comment

Croviajo Over a year ago

Sorry my bad I meant link function, btw $compile function has solved the problem, thanks.

Collectives™ on Stack Overflow

add an angularjs material element via a directive's link function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related