Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/464.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ng类未打开/关闭类_Javascript_Angularjs - Fatal编程技术网

Javascript ng类未打开/关闭类

Javascript ng类未打开/关闭类,javascript,angularjs,Javascript,Angularjs,我有一个应该在路径改变时打开/关闭类的项,但由于某些原因它不起作用。我从另一个项目复制并粘贴了它,它在那里工作,但由于某种原因,它在这里不工作 这是控制器: app.controller('AdminNav', function($scope, $location){ // Highlight navigation links $scope.isActive = function(viewLocation){ var regexp = new RegExp(vi

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

这是控制器:

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>

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

/\/dashboard\/clicks.+/
而位置路径是

/dashboard/clicks
显然,因为
+
regexp与给定路径不匹配,但确实与
/dashboard
匹配

更可靠的解决方案是使用当前
$route.current
对象的
regexp
属性,Angular内部使用该属性来精确实现此目的-路由到位置路径映射:

$scope.isActive = function(viewLocation) {
    if ($route.current && $route.current.regexp) {
        return $route.current.regexp.test(viewLocation);
    }
    return false;
};
如果您为
/dashboard/单击
$route.current.regexp
路由记录
$route,您将看到它如下所示:

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


演示:

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


当您可以使用简单的
==
直接测试$location.path()时,请检查为什么要使用regexp?因为传入的路径之后可能会有其他内容,例如某种类型的id只给出路径,而没有任何查询字符串参数…如果您只想使用
$location.search()
…如果您想要整个url
$location.absUrl()
…如果在单击后出现某些内容,例如:
/dashboard/clicks/something
,我将如何匹配这些内容单击后将运行“新建摘要”循环,该循环将更新绑定,并重新测试所有菜单项以选择适当的内容。如果这是你要问的。我想要它,这样我可以在前两项之后放置一个id或点击子项(如果有意义的话),如果它是动态的,我不能为每种类型的东西都写一个案例。我发现了我的问题,我需要使用
*
而不是
+
,因为另一个项目总是在第二项之后有一些东西,而这个项目没有。如果你有同样有效的方法,请告诉我。
/^\/dashboard\/clicks$/