Как создать активный (класс) с помощью angular.js

Question

Я использую [uikit] и хотел бы использовать их активный класс по ссылке. Я также хотел бы использовать их значки одновременно. 1 Я пытаюсь реализовать эту практику, fiddle однако я получаю эту ошибку.

Uncaught SyntaxError: Unexpected token .

и

`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.` 

Это мой 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> 

// создать модуль и назовите его 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' 
    ]; 

}); 

// маршрут-й е главная страница

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) {}; 

Я подозреваю, что я не зацепив .directive правильно или не включая контроллер, но если вы посмотрите на скрипку там не один!

ОБНОВЛЕНИЕ: я попал со следующим:

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

Вам нужно только изменить .directive(... на номер rustyApp.directive(... и взять его за пределы функции конфигурации.

Эта строка вызывает первую ошибку JS, из-за которой rustyApp не может загрузиться, поскольку по какой-то причине у вас есть его в конфиге.

Я думаю, вы поняли, что происходит, так что я просто буду писать этот маленький пример здесь: `` ` rustyApp = angular.module (...) контроллер (...);.

// Тот же результат, что и ниже. ИМО, вы должны использовать нижеследующее, как яснее.

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

Также directive, config, run, factory, service, controller (и любой я забыл), все функции, которые доступны на модуле 'объекта'. Когда вы вызываете один из них, результатом функции является модуль, на который вы его вызывали.