javascript - ng-class 没有打开/关闭类

Question

我有一个项目应该在路径改变时打开/关闭一个类，但由于某种原因它不起作用。我从另一个项目复制并粘贴了它，它在那里可以工作，但由于某种原因它不能在这里工作。

这是 Controller :

app.controller('AdminNav', function($scope, $location){

    // Highlight navigation links
    $scope.isActive = function(viewLocation){
        var regexp = new RegExp(viewLocation + ".+");
        return regexp.test($location.path());
    };
});

这是 html:

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

当我点击其中一个链接时，url 发生了变化，但是 active 类保留在第一个 li 上，我不确定为什么......任何想法？

这是所有的javascript:

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

Answer 1

问题是您构造了不正确的正则表达式。例如，当您单击第二项时，正则表达式将是

/\/dashboard\/clicks.+/

而定位路径是

/dashboard/clicks

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

更可靠的解决方案是使用当前 $route.current 对象的 regexp 属性，Angular 内部使用它来实现这个目的——路由到位置路径映射:

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

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

/^\/dashboard\/clicks$/

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

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