Angularjs - Inserting directives dynamically to dom element

Question

I'm trying to set a directive to my inputs accordingly.

So let's say I have this input:

<input type="foo" id="myinput" maskvalue> </input>

This works fine on my app, the problem is when I try to insert "maskvalue" dynamically using the "setAttribute" it doesn't work, here's what I'm trying to do right now:

element = document.getElementById('myinput');
if(element){
  element.setAttribute('maskvalue', "");
}

This code will successfully insert my directive to the dom element, but will take no effect. It seems that is impossible to insert a custom directive to the dom when it was already loaded, am I wrong?

But that's basically the question, how can I insert a directive dynamically to a dom element?

Thanks

You are going to have to use the dark magic of $compile to get angular to recognise it - onehungrymind.com/angularjs-dynamic-templates — dmoo
– dmoo, Commented Aug 9, 2016 at 22:31

Dr. Cool · Accepted Answer · 2016-08-09 22:41:05Z

3

Use Angular's $compile command to Angular-ize this. Basically, you need to notify Angular that you have made a change so it can do its magic.

function MyController($scope, $compile) {
    element = document.getElementById('myinput');
    if (element) {
        element.setAttribute('maskvalue', "");
        $compile(element)($scope);
    }
}

Make sure you do this in an Angular controller that has $compile and $scope injected into it.

answered Aug 9, 2016 at 22:41

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Angularjs - Inserting directives dynamically to dom element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related