Question

我有一个Bootstrap实现，其中导航栏是一个无序列表，每个项目设置为在活动时突出显示。突出显示本身使用CSS设置样式，但使用AngularJS检查活动状态：

<ul class="nav navbar-nav navbar-right">
   <li ng-class="{ active: isActive('/blog')}">
      <a onClick="pagetop()" href="#blog">BLOG</a>
   </li>
</ul>

isActive()方法在AngularJS控制器中定义为：

function HeaderController($scope, $location){ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}

如您所见，如果链接的URL处于活动状态，AngularJS只会向.active项添加<li>类。这是使用CSS设置样式的类。这在当前打开的网页 http://localhost:8888/a-s/#/blog/ 时效果很好，但在 http://localhost:8888/a-s/#/blog/sub-page/ 或 http://localhost:8888/a-s/#/blog/sub-page/sub-sub-page/ 时却无效。如何修改代码以确保 / blog 下的所有路径都触发.active类逻辑？有没有办法在这种语法中使用通配符？

Answer 1

现在检查路径和传递的值是否相等，而不是检查路径中是否存在传递的值

function HeaderController($scope, $location) {
  $scope.isActive = function(viewLocation) {
    return $location.path().indexOf(viewLocation) > -1;
  };
}

Answer 2

这不是一个干净的解决方案。因为它适用于http://localhost:8888/a-s/#/blog-another/ b或http://localhost:8888/a-s/#/blog_edit/ b等等。需要像这样更新：

function HeaderController($scope, $location) {
  $scope.isActive = function(viewLocation) {
    var path = $location.path();
    var addViewLocation = viewLocation+"/";
    var inPath = false;
    if(path.indexOf(addViewLocation)==-1)
    {
      inPath  = path.indexOf(viewLocation)+viewLocation.length==path.length;
    }
    else
      inPath = true;
    return inPath;
  };
}

这是测试地点：

isActive("www.location.ru/path","/path"); true isActive("www.location.ru/path/tr","/path"); true isActive("www.location.ru/path-r/tr","/path"); false isActive("www.location.ru/path/","/path"); true isActive("www.location.ru/path/we/ew","/path"); true isActive("www.location.ru/path-another/we/ew","/path"); false

在JavaScript中包含动态创建的子页面“isActive（）”

2 个答案: