How to add custom directive name to element using angular or jquery?

Question

I want to add custom directive name to an element like we add attribute name and their values using attr() method in jquery .

For example supoose I have a custom directive named example-directive and I want to call this directive on an element programmatically like in the following js fiddle example I want to add example-directive on the div that has ID sam.

Could anyone tell me how to achieve this?

http://jsfiddle.net/RmDuw/383/

Radu · Accepted Answer · 2015-09-01 06:38:44Z

1

You were so close to do it. Here is the fiddler that is doing it and here is an article that explains it in more detail.

You've missed:

console.log(attrs['exampleDirective1']);

Edit:

As per your comment you can add the attribute with jQuery like in this also you can find the docummentation for .attr here

edited Sep 1, 2015 at 6:38

answered Sep 1, 2015 at 6:12

Radu

1,06612 silver badges36 bronze badges

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

3 Comments

Sunil Madan Over a year ago

I want to add directive name to the Div that contains Id "sam" . Like in following example on button click I can add attribute name on element using jauery attr() . Same way I want to add Directive name on div element that has id "sam" on button click. jsfiddle.net/ge87pgnf/2

Obaid Over a year ago

In other words you want to use your exampleDirective1 on the div that has id=sam ?

Radu Over a year ago

@angle-bracket please look on my edit. it should do the trick. you can see the id with firebug or some inspecting tools

Obaid · Accepted Answer · 2015-09-01 07:05:37Z

0

$compile is the key here. Assuming that you actually want to replace that div with the directive of yours. You need to find that element and then compile your directive html and replace it with that. Without compile it will not work and you'd just see the html.

function MyCtrl($scope, $element, $compile) {
    var element = $element.find("#sam");
    var compiled = $compile('<div example-directive1>{{message}}</div>')($scope);
    element.replaceWith(compiled);
}

Here is the jsfiddle.

edited Sep 1, 2015 at 7:05

answered Sep 1, 2015 at 6:53

Obaid

1,44521 silver badges38 bronze badges

Comments

Ryan Born · Accepted Answer · 2019-07-23 16:32:45Z

0

Set the attribute of the element using JQuery

$('#id').attr('directive-name', '1');
Compile the attribute

$compile($('#id'))($scope);

Here is the jsFiddle

answered Jul 23, 2019 at 16:32

Ryan Born

1

Collectives™ on Stack Overflow

How to add custom directive name to element using angular or jquery?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related