Add a directive to an element with AngularJS?

Question

I've been playing with AngularJS for a few days but I still can't grasp some things about the way directives are managed, and I could not find any good answer anywhere for what I'm looking for.

Let's say I have a specific div in which I want to add a directive on a specific event, e.g. on a click. What is the best way to do so ? Or is my approach totally wrong, and should this be done in another way ?

I've set up a Plunker to better illustrate my problem : http://plnkr.co/edit/KM2KFVb6iuhtQKrLYax1?p=preview

Thanks in advance for your help!

Community · Accepted Answer · 2017-05-23 12:19:13Z

2

This question partly explains why your method doesn't work: How to pass custom directive name dynamically in class attribute of div tag?

Also, that is not the angular-esque way of doing things. I suspect this would be more angular like while doing what you want: http://plnkr.co/edit/fNZvZ1vzQYQLjZti37GQ?p=preview

Template

<div class="whatever" ng-if="!directiveOn">div.whatever</div>
<div newstuff ng-if="directiveOn">div.whatever</div>

Controller

  $scope.directiveOn = false;
  $scope.click = function() {
    $scope.directiveOn = true;
  };

The other option would be to pass the directive the information of whether it is turned on or off.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Nov 24, 2013 at 19:19

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

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

1 Comment

Ronan Over a year ago

Thank you so much! This is exactly the solution I was looking for. It makes perfect sense from an Angular point of view.

Collectives™ on Stack Overflow

Add a directive to an element with AngularJS?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related