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

【问题标题】：add Bootstrap active class based on route change in Angular根据 Angular 中的路由更改添加 Bootstrap 活动类
【发布时间】：2017-04-12 08:59:33
【问题描述】：

我正在尝试根据路径在导航菜单上使用 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');
    }
]);

我试图实现这个问题的解决方案，adding or removing classes based on route changes in angular 但无济于事。谁能指出我做错了什么？

这就是我想要实现的目标，但是在带有角度的单个页面中，http://plnkr.co/edit/FNwIAU4OgQHlREIfi4BG 我得到了它，除了使用它们时的条件活动类。（我对 html、css 和 js 也很陌生）

编辑： 错误信息：

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)

【问题讨论】：

检查是否有帮助：stackoverflow.com/a/22128830/949476
@dfsq 老实说，我尝试过使用它，但我对 JavaScript 的了解仍然不足以理解我需要在哪里编辑那段代码以及放置它的位置。我在日志中发现了一条错误消息，如果您可以看一下，我会用它来编辑我的问题吗？
你没有注入 $rootScope。
哦，天哪，我注入了 $rootscope 而不是 $rootScope。非常感谢你找到那个。现在可以了！（还需要从 ng-class 中删除 nav-item，并从位置表达式中删除 !#：location ==='/path'）

标签： javascript angularjs ngroute

【解决方案1】：

既然我们发现了 cmets 有什么问题，我会花时间写一个答案以供将来参考，问题是：
- 控制器中的拼写错误，将 $rootscope 更改为 $rootScope，
- 错误使用 ng-class 语法，删除了 nav-item。
- ng-class 的表达式错误，location==='#!/path' 改为 location==='/path'。
感谢@dfsq

【讨论】：