javascript - 包括 JavaScript 中动态创建的子页面 "isActive()"

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 Controller 中定义为:

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

如你所见，AngularJS 只是添加了一个 .active类到 <li>项目(如果链接的 URL 处于事件状态)。这是使用 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;
  };
}