How do I create an active (class) using angular.js

Question

I am using [uikit] and like to utilize their active class on a link. I'd also like to use their icons simultaneously. 1 I am trying to implement this practice, fiddle however I get this error.

Uncaught SyntaxError: Unexpected token .

and

`Uncaught Error: [$injector:modulerr]
 Failed to instantiate module rustyApp due to:
 Error: [$injector:nomod] Module 'rustyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.`

This is my HTML:

 <section class="top-bar-section uk-navbar-flip" ng-app="link">
    <ul class="uk-navbar-nav ">
       <li active-link="uk-active"><a href="/#home"><i class="uk-icon-home uk-icon-medium "> </i>home</a></li>
       <li active-link="uk-active"><a href="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</a></li>
       <li active-link="uk-active"><a href="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</a></li>
    </ul>
 </section>

// create the module and name it rustyApp

var rustyApp = angular.module('rustyApp', [
    'ngRoute',
    'viewController',
    'mm.foundation',
    'angular-flexslider'
])
.controller('BasicSliderCtrl', function($scope) {
    $scope.slides = [
        '../images/sliderContent/1.jpg',
        '../images/sliderContent/2.jpg',
        '../images/sliderContent/3.jpg',
        '../images/sliderContent/4.jpg'
    ];

});

// route for the home page

 rustyApp.config(function($locationProvider, $routeProvider) {

$locationProvider.html5Mode(true);
$routeProvider
    .when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeController'
    })
    .when('/work', {
        templateUrl: 'partials/work.html',
        controller: 'WorkController'
    })

.when('/contact', {
        templateUrl: 'partials/contact.html',
        controller: 'ContactController'
    })
    .otherwise({
        redirectTo: '/home'
    });

  });

  var viewController = angular.module('viewController', []);
  var viewController = angular.module('viewController', []);

  .directive('activeLink', ['$location', function(location) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs, controller) {
        var clazz = attrs.activeLink;
        var path = attrs.href;
        path = path.substring(1); //hack because path does bot return including hashbang
        scope.location = location;
        scope.$watch('location.path()', function(newPath) {
            if (path === newPath) {
                element.addClass(clazz);
            } else {
                element.removeClass(clazz);
            }
        });
    }

};

}]);



rustyApp.controller('HomeController', function($scope) {});
rustyApp.controller('WorkController', function($scope) {});
rustyApp.controller('ContactController', function($scope) {});


var OffCanvasDemoCtrl = function($scope) {};

I suspect I am not hooking the .directive correctly or not including a controller but if you look at the fiddle there isn't one!

UPDATE: I wound with the following:

HTML

<section class="top-bar-section uk-navbar-flip">
    <ul class="uk-navbar-nav ">
        <li  my-active-link="/"><a  href="/#home"><i class="uk-icon-home uk-icon-medium "> </i>home</a></li>
        <li  my-active-link="/work"><a  href="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</a></li>
        <li  my-active-link="/contact"><a  href="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</a></li>
    </ul>
</section>

JS

rustyApp.directive('myActiveLink', function($location) {
return {
    restrict: 'A',
    scope: {
        path: "@myActiveLink"
    },
    link: function(scope, element, attributes) {
        scope.$on('$locationChangeSuccess', function() {
            if ($location.path() === scope.path) {
                element.addClass('uk-active');
            } else {
                element.removeClass('uk-active');
            }
        });
    }
};

});

Answer 1

You just need to change .directive(... to rustyApp.directive(... and take it outside of the config function.

This line causes the first JS error which causes rustyApp to fail to load as you have it inside the config for some reason.

I think you've misunderstood what's going on so I'll just write up this little example here: ``` rustyApp = angular.module(...).controller(...);

// Same result as below. IMO you should use the below generally as it is clearer.

rustyApp = angular.module(...); rustyApp.controller(...); ```

Also directive, config, run, factory, service, controller (and any I've forgotten) are all functions that are available on a module 'object'. When you call one of them the result of the function is the module you called it on.