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!

Answer 1

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.