javascript - AngularJS，两级菜单将 "active"类添加到基于 url 的事件子项及其父项

Question

如果只是一级导航/菜单，url如"localhost/#/user"

我知道我可以使用:

<ul>
  <li ng-class="{active: isActive('/user')}><a href="#/user'>User</a></li>
</ul>

在 Controller 中

$scope.isActive = function (path) {
  if ( path == $location.path() )
    return true;
  return false;
};

然后当 url 为“localhost/#/user”时，将添加“active”。

然而，当涉及到二级菜单时，像“localhost/#/user/orders”这样的 url

<ul>
  <li>
    <a href="#/user'>User</a>
    <ul>
      <li><a href="#/user/orders'>Orders</a></li>
    </ul>
  </li>   
</ul>

我如何根据 url 向元素“订单”及其父“用户”添加“事件”类？(这样我就可以突出显示它们)

提前致谢。

---

更新:

谢谢，现在可以用了:D

@Nikos Paraskevopoulos、@piatek、@Chandermani 谢谢

这是我用 CoffeeScript 编写的最终工作代码，虽然代码不够好，但它可以工作:)

.directive('highlightActive', () ->
    return {
        restrict: "A"
        controller: [
            '$scope', '$element', '$attrs', '$location'
            ($scope, $element, $attrs, $location) ->
                links = $element.find('a')
                path = () ->
                    return $location.path()

                highlightActive = (links, path) ->
                    path = '#' + path

                    angular.forEach(links, (link) ->
                        $link = angular.element(link)
                        $li = $link.parent('li')
                        href = $link.attr('href')

                        if ($li.hasClass('active'))
                            $li.removeClass('active')
                        if path.indexOf(href) is 0
                            $li.addClass('active')
                    )

                highlightActive(links, $location.path())

                $scope.$watch(path, (newVal, oldVal) ->
                    if newVal is oldVal
                        return
                    highlightActive(links, $location.path())
                )
        ]

    }
)

Answer 1

如果您的 URL 遵循菜单的层次结构(即 /user → /user/orders → /user/orders/something ，其中 → 表示子菜单)，您可以使用一个简单的指令检查字符串包含情况:

app.directive("menuHref", function() {
    return {
        restrict: "A",
        template: "<li><a ng-href='{{ href }}'>{{ text }}</a></li>",
        scope: {
            text: "="
        },
        controller: ["$scope", "$element", "$attrs", "$location", function($scope, $element, $attrs, $location) {
            $scope.href = "#" + $attrs.menuHref;

            $scope.$watch(
                function() {
                    return $location.hash().startsWith($attrs.menuHref);
                },
                function(newval) {
                    $element.toggleClass("active", newval);
                }
            );
        }]
    };
});

用作:

<li menu-href="/user/orders" text="Orders"></li>

(注意 href 不是以 # 开头的，<a> 是由指令生成的)

我没有测试过这段代码，它可能包含小错误(我们可以讨论)但我认为原理应该可行。