AngularJS Directive to add class on click, but remove and add it to another element if clicked

angularjs, angularjs-directive, javascript

Solution

You can avoid DOM manipulation and allow for reuse if you utilize isolate scope and `ng-class`:

Directive:

.directive('swapit', function(){
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      active: '='
    },
    template: '<a ng-click="active = $id" ng-class="{active: $id === active}" ng-transclude></a>'
  }
})

HTML:

<swapit active="active">Still got game</swapit>
<swapit active="active">TnT</swapit>
...

By using isolate scope, each directive element will have its own scope with a unique ID, which can be accessed through `scope.$id`. When a directive element is clicked on, you can assign this value to an `active` scope variable, which is shared between your directives.

ng-click="active = $id"

Then, you can use `ng-class` with an expression which determines whether each directive element's scope ID matches that of the currently active scope ID:

ng-class="{active: $id === active}"

View this demo, which more closely matches your implementation (though not 100%).

Problem

I've got a simple directive that I use to add a class on click and remove it from the element if clicked again. However I'd like to refactor it for a more common use in generic menus. Instead if a `<li>` element is clicked that is not the current active element, it should remove it from the current element and place it on the new one. Basically I want to add an "active" class to the `<li>` element that is currently active. In my menu I have: ``` <ul> <li><a swapit ng-click="lol(stillgot)" class="select-show">Still Got Game</a></li> <li><a swapit ng-click="lol(thick)" class="select-show">TnT</a></li> <li><a swapit ng-click="lol(seldon)" class="select-show">Seldon</a></li> <li><a swapit ng-click="lol(hit)" class="select-show">HitMan</a></li> <li><a swapit ng-click="lol(community)" class="select-show">Community</a></li> </ul> .directive('swapit', function() { return { restrict : 'A', link : function(scope, elem) { var currentState = true; elem.on('click', function() { console.log('You clicked me!'); if(currentState === true) { console.log('It is on!'); angular.element(elem).addClass('active'); } else { console.log('It is off!'); angular.element(elem).removeClass('active'); } currentState = !currentState; }); } }; }); ```

Original source