Question

我有一个项目应该在路径更改时打开/关闭一个类，但由于某种原因它无法正常工作。我从另一个项目复制并粘贴它，它在那里工作，但由于某种原因，它不能在这里工作。

这是控制器：

<div class="collapse navbar-collapse" id="admin-side-nav" ng-controller="AdminNav">
    <ul class="nav nav-pills nav-stacked">
        <li ng-class="{active: isActive('/dashboard')}">
            <a href="/dashboard"><i class="glyphicon glyphicon-home"></i> Home</a>
        </li>
        <li ng-class="{active: isActive('/dashboard/clicks')}">
            <a href="/dashboard/clicks"><i class="glyphicon glyphicon-hand-up"></i> Clicks</a>
        </li>
        <li ng-class="{active: isActive('/dashboard/uploads')}">
            <a href="/dashboard/uploads"><i class="glyphicon glyphicon-upload"></i> Uploads</a>
        </li>
        <li ng-class="{active: isActive('/dashboard/forms')}">
            <a href="/dashboard/forms"><i class="glyphicon glyphicon-list"></i> Forms</a>
        </li>
    </ul>
</div>

这是html：

active

当我点击其中一个链接时，网址会发生变化，但li课程会停留在第一个var app = angular.module('EDAdmin', ['ngRoute']); app.config(function($routeProvider, $locationProvider){ // Prepare for html5 mode $locationProvider.hashPrefix('!'); $locationProvider.html5Mode(true); // Setup routing $routeProvider.when('/dashboard/', { templateUrl: '/templates/dashboard/default.html' }).when('/dashboard/clicks', { templateUrl: '/templates/dashboard/default.html' }).when('/dashboard/uploads', { templateUrl: '/templates/dashboard/default.html' }).when('/dashboard/forms', { templateUrl: '/templates/dashboard/default.html' }).otherwise({ redirectTo: '/dashboard' }); }); app.controller('AdminNav', function($scope, $location){ $scope.active = ''; // Highlight navigation links $scope.isActive = function(viewLocation){ var regexp = new RegExp(viewLocation + ".+"); return regexp.test($scope.active); }; $scope.$on('$routeChangeSuccess', function(){ $scope.active = $location.path(); }) });上，我不知道为什么......有什么想法？

以下是所有javascript：

{{1}}

Answer 1

问题是你构造了错误的正则表达式。例如，当您单击第二个项目时，正则表达式将是

/\/dashboard\/clicks.+/

，而位置路径是

/dashboard/clicks

显然因为.+正则表达式与给定路径不匹配，但确实与/dashboard匹配。

更可靠的解决方案是使用当前regexp对象的$route.current属性，Angular在内部使用该属性来确切地说明这个purpuse - 路由到位置路径映射：

$scope.isActive = function(viewLocation) {
    if ($route.current && $route.current.regexp) {
        return $route.current.regexp.test(viewLocation);
    }
    return false;
};

如果您为$route.current.regexp路线记录/dashboard/clicks，您会看到它看起来像这样：

/^\/dashboard\/clicks$/

因此您可以看到差异 - 您需要将字符串匹配限制为字符串的^开头和$结尾。

演示： http://plnkr.co/edit/7N0MQDYNWjo18bcmfIDB?p=preview

Answer 2

检查$scope.isActive方法返回的返回值。

检查plunker

ng-class不会打开/关闭类

2 个答案: