Angular directives and utils

AAA. Angular utils snippets

// some useful directives and snippets for angularJS 1.X applications

hover-class.directive.js

(function () {
    angular.module('derlin.hover', [])
        .directive('hoverClass', hoverClass);


    // how to use: 
    // <ANY hover-class="default-class:hover-class">...
    // any of the two can be empty, but the ":" MUST be present.
    function hoverClass() {
        return {
            restrict: 'A',
            scope: {
                hoverClass: '@'
            },
            link: function (scope, element) {
                var split = scope.hoverClass.split(":");

                var clsOut = split[0];
                var clsIn = split[1];

                element.addClass(clsOut);

                element.on('mouseenter', function () {
                    element.removeClass(clsOut);
                    element.addClass(clsIn);
                });
                element.on('mouseleave', function () {
                    element.removeClass(clsIn);
                    element.addClass(clsOut);
                });
            }
        };
    };

})();

link-active.directive.js

(function () {
    angular.module('derlin.link', [])
        .directive('activeLink', linkDirective);

    function linkDirective($location, $rootScope) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var clazz = attrs.activeLink;
                var path = attrs.href;
                path = path.substring(1); // hack because path does not return including hashbang
                scope.location = $location;
                scope.$watch('location.path()', function (newPath) {
                    $rootScope.path = newPath.substring(1); // remove start slash
                    if (path === newPath) {
                        element.addClass(clazz);
                    } else {
                        element.removeClass(clazz);
                    }
                });
            }
        };
    }

})();

stop-event.directive.js

  // from http://stackoverflow.com/questions/14544741/how-can-i-make-an-angularjs-directive-to-stoppropagation
  .directive('stopEvent', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if(attr && attr.stopEvent)
                    element.bind(attr.stopEvent, function (e) {
                        e.stopPropagation();
                    });
            }
        };
     });