angularjs - Angular JS : "active" class on menu items created by a controller

Question

我正在使用 JSON 服务来列出菜单项(链接)。在导航不同的路线/页面时，我希望将“事件”类添加到当前处于事件状态的链接(即用户所在的页面)。

我使用这个 jsfiddle 作为起点: http://jsfiddle.net/p3ZMR/4/

我还在 stackoverflow 上找到了几个答案，但所有答案都类似于上面的解决方案。

但是，如果链接是通过 ng-repeat 生成的，则该解决方案不起作用:

  <ul class="main-menu">
    <li ng-repeat="page in pages">
      <a href="/#/{{page.id}}" active-link="active">{{page.name}}</a>
    </li>
  </ul>

似乎在 Controller 添加链接之前调用了该指令。

有没有办法解决这个问题？

Answer 1

用于重复链接的 HTML

<div ng-app="link">
    <div data-ng-controller="myController">
        <a href="#/{{ link.url }}" data-ng-repeat="link in links" data-ng-class="(link.url == location.path() && 'active')">
            {{ link.name }}
        </a> 
    </div>
</div>

Javascript

angular.module('link', [])

function myController($scope, $location){
    $scope.location = $location;
     $scope.links = [
         { url: "one", name: "One"},
         { url: "two", name: "Two"},
         { url: "", name: "Three"}
    ];
}

这将生成链接一/二/三，其中三个以红色突出显示。这是一个 jsfiddle: http://jsfiddle.net/4mFYy/1/