Вопрос:

добавить активный класс Bootstrap на основе изменения маршрута в Angular

javascript angularjs ngroute

249 просмотра

1 ответ

161 Репутация автора

Я пытаюсь добавить класс (активный класс начальной загрузки) с помощью Angular ngClass в моем меню навигации на основе пути.
шаблон навигации:

<div class="section">
<div class="container">
    <div class="row">
        <div class="col-md-12" ng-controller="MainCtrl">
            <ul class="nav nav-pills nav-justified" style="width:30%">
                <li ng-class="{active: location === '#!/home', nav-item}">
                    <a href="#!/home">Home</a>
                </li>
                <li ng-class="{active: location === '#!/resume', nav-item}">
                    <a href="#!/resume">CV</a>
                </li>
                <li ng-class="{active: location === '#!/overviewActivities', nav-item}">
                    <a href="#!/overviewActivities">I-Talent</a>
                </li>
            </ul>
        </div>
    </div>
</div>

app.module.js:

angular.
    module('iTalentApp', [
    'ngRoute',
    'home',
    'resume',
    'navigationMain'
]).controller('MainCtrl', function ($scope, $rootscope, $location) {
    $scope.location = $location.path();
    $rootScope.$on('$routeChangeSuccess', function () {
        $scope.location = $location.path();
    });
});

index.html:

<body>
    <navigation-main></navigation-main>
    <div ng-view></div>
  </body>

И мой конфиг:

angular.
module('iTalentApp').
config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('!');

        $routeProvider.
            when('/home', {
                template: '<home></home>'
            }).
            when('/resume', {
                template: '<resume></resume>'
            }).
            when('/overviewActivities', {
                template: '<overview-activities></overview-activities>'
            }).
            otherwise('/home');
    }
]);

Я пытался реализовать решение этого вопроса, добавляя или удаляя классы на основе изменения маршрута в угловых, но безрезультатно. Кто-нибудь может указать, что я делаю не так?

это то, чего я пытаюсь достичь, но на одной странице с угловым, http://plnkr.co/edit/FNwIAU4OgQHlREIfi4BG, я получил его работоспособным, за исключением условного активного класса, когда они используются. (Я также довольно плохо знаком с HTML, CSS и JS)

редактировать: errormessage:

angular.js:14199 Error: [$injector:unpr] Unknown provider: $rootscopeProvider <- $rootscope <- MainCtrl
http://errors.angularjs.org/1.5.11/$injector/unpr?p0=%24rootscopeProvider%20%3C-%20%24rootscope%20%3C-%20MainCtrl
    at angular.js:68
    at angular.js:4563
    at Object.getService [as get] (angular.js:4716)
    at angular.js:4568
    at getService (angular.js:4716)
    at injectionArgs (angular.js:4741)
    at Object.invoke (angular.js:4763)
    at $controllerInit (angular.js:10592)
    at nodeLinkFn (angular.js:9469)
    at compositeLinkFn (angular.js:8810)
Автор: Erik Источник Размещён: 12.04.2017 08:59

Ответы (1)


0 плюса

161 Репутация автора

Решение

Так как мы нашли, что было не так в комментариях, я найду время, чтобы написать ответ для дальнейшего использования. Проблемы заключались в следующем:
- орфографическая ошибка в контроллере, изменение $ rootcope на $ rootScope,
- неправильное использование синтаксиса класса ng, удалено Nav-пункт.
- ошибка в выражении ng-класса, местоположение === '#! / path' заменено на location === '/ path'.
Слава @dfsq

Автор: Erik Размещён: 12.04.2017 09:34
Вопросы из категории :
32x32