AngularJS is-active directive

<!DOCTYPE html>
<html ng-app="demo" ng-controller="CommonCtrl" ng-class="{main: isMain}">

  <head>
    <script src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/ng-template" id="home.tpl">
      <h3>IS-ACTIVE <small>directive for AngularJS</small></h3>
      <p>This landing page is really just here to give an extra nav link to the example</p>
      <p>Disregard!</p>
    </script>

    <script type="text/ng-template" id="readme.tpl">
      <h3>README <small>AngularJS is-active directive</small></h3>
      
      <p>It's a simple replacement for using ng-class to toggle
      an "active" class, often used for navbars or tabs in
      frontend frameworks like Bootstrap.</p>
      
      <p>It's entirely possible that an approach like this
      will interfere with animations or regular ng-class
      behaviour, I haven't been very careful when hacking
      this together.</p>
      
      <p>But, for the simple thing that it is, I don't think
      it's too bad, and you might find some use in it.</p>
      
      <p>It doesn't rely on any $watches, and depends only
      on the $locationChangeSuccess event. As a bonus,
      it prevents the default action on the click event
      when the url is active.</p>
    </script>

    <script type="text/ng-template" id="about.tpl">
      <h3>ABOUT <small>the author</small></h3>
      <p>I am writing a lot of AngularJS code these days --- I've been involved previously in everything from driver development and telephony to browser development.</p>
      <p>While I need to launch a proper application at some point, I'm having a lot of fun experimenting with different approaches to using the framework, and experimenting
         in general.</p>
      <p>Hopefully I can keep doing this for a while longer, and improve the performance, reliability and overall usefulness of the framework. Cheerio~</p>
    </script>
  </head>

  <body>
    <header>
      <a href="#/" data-is-active="active">is-active</a>
      <a href="#/readme" data-is-active>readme</a>
      <a href="#/about" data-is-active>about</a>
    </header>
    <div ng-view></div>
  </body>

</html>

// Code goes here

angular.module("demo", ['ngRoute'])
  .constant("isActiveConfig", {
    activeClass: "active"
  })
  .controller("CommonCtrl", function($rootScope, $scope, $location){
    $rootScope.$on("$locationChangeSuccess", function(event, newUrl){
      if($location.url() == '/') $scope.isMain = true;
      else $scope.isMain = false;
    });
  })
  .directive("isActive", function($location, $rootScope, isActiveConfig) {
    return {
      restrict: "A",
      link: function(scope, element, attr) {
        if (element[0].nodeName.toLowerCase() !== "a") {
          return;
        }
        var locWatch = $rootScope.$on("$locationChangeSuccess", function(event, newUrl){
          var href = element.prop('href');
          if (newUrl !== href) {
            attr.$removeClass(name);
          } else {
            attr.$addClass(name);
          }
        });
        var name = attr.isActive || isActiveConfig.activeClass || "active";
        scope.$on("$destroy", locWatch);
      }
    }
  })
  .config(function($routeProvider) {
    $routeProvider
    .when("/", {
      templateUrl: "home.tpl"
    })
      .when("/readme", {
        templateUrl: "readme.tpl"
      })
      .when("/about", {
        templateUrl: "about.tpl"
      })
      .otherwise({
        redirectTo: "/"
      });
  });

/* Styles go here */

body {
  padding-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
}
.main {
  background-color: #f0f0f0;
}
h3 > small {
  color: #888;
  font-size: 80%;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
}
header a {
  text-decoration: none;
  color: #888;
  display: inline-block;
  padding: .5em;
  margin: 0;
  background-color: #000;
  border: none;
}
a:hover {
  color: #eee;
}
a.active {
  color: #4bf;
}
a.active:hover {
  cursor: default;
}

###AngularJS is-active directive

It's a simple replacement for using ng-class to toggle
an "active" class, often used for navbars or tabs in
frontend frameworks like Bootstrap.

It's entirely possible that an approach like this
will interfere with animations or regular ng-class
behaviour, I haven't been very careful when hacking
this together.

But, for the simple thing that it is, I don't think
it's too bad, and you might find some use in it.

It doesn't rely on any $watches, and depends only
on the $locationChangeSuccess event. As a bonus,
it prevents the default action on the click event
when the url is active.