根据Angular中的路由更改添加Bootstrap活动类

Question

I am trying to add a class (bootstrap active class) using Angular ngClass on my navigation menu, based on the path. 我试图根据路径在导航菜单上使用Angular ngClass添加一个类（引导活动类）。
navigationMain template: navigationMain模板：

<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: 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: index.html的：

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

And my config: 而我的配置：

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');
    }
]);

I tried to implement the solution to this question, adding or removing classes based on route changes in angular but to no avail. 我尝试实现此问题的解决方案，根据角度的路线变化添加或删除类，但无济于事。 Can anyone point out what I'm doing wrong? 谁能指出我做错了什么？

this is what i'm trying to achieve but in a single page with angular, http://plnkr.co/edit/FNwIAU4OgQHlREIfi4BG I got it working except the conditional active class when they are used. 这是我要实现的目标，但是在带有角度的单页中， http://plnkr.co/edit/FNwIAU4OgQHlREIfi4BG我使它工作了，除了使用条件活动类时。 (I'm also fairly new to html, css and js) （我对html，css和js也相当陌生）

edit: errormessage: 编辑： 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)

Answer 1

Since we found what was wrong in the comments I'll take the time to write an answer for future reference, The problems were: 既然我们发现评论中有什么问题，我将花时间写一个答案以供将来参考，问题是：
- spelling error in controller, changed $rootscope into $rootScope, -控制器中的拼写错误，将$ rootscope更改为$ rootScope，
- wrong use of ng-class syntax, removed nav-item. -错误使用ng-class语法，删除了nav-item。
- mistake in the expression of ng-class, location==='#!/path' changed into location==='/path'. -ng-class表达式中的错误，将location ==='＃！/ path'更改为location ==='/ path'。
Kudos to @dfsq @dfsq的荣誉

根据Angular中的路由更改添加Bootstrap活动类

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-12 09:34:20

根据Angular中的路由更改添加Bootstrap活动类

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-12 09:34:20

解决方案1
0 已采纳 2017-04-12 09:34:20