Angular JS:由控制器创建的菜单项上的"活动"类

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>

似乎在控制器添加链接之前调用了该指令.

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

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/

Answer 2

一个主要的编程概念是关注点分离。我个人不喜欢在我的观点中保留逻辑或比较。我更愿意在 javascript 中保留业务逻辑和比较

超文本标记语言

<ul class="main-menu">
    <li ng-repeat="page in pages">
        <a ng-click="menu(page)" ng-class="{ active: isActive(page.url)>{{page.name}}</a>
    </li>
</ul>

JavaScript

angular.module('link', [])

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

    $scope.isActive = function (viewLocation) {
        var pattern = '/' + viewLocation,
            re = new RegExp(pattern);
        return re.test($location.path());
    };

    $scope.menu = function (location) {
        $location.path('/' + location.location);
    };
}