Angular JS：控制器创建的菜单项上的“活动”类答案

【问题标题】：Angular JS: "active" class on menu items created by a controllerAngular JS：控制器创建的菜单项上的“活动”类
【发布时间】：2013-05-10 12:25:27
【问题描述】：

我正在使用 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>

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

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

【问题讨论】：

How to highlight a current menu item in AngularJS?的可能重复
我不这么认为。那里的解决方案需要对链接进行硬编码
不。你可以直接说getClass('/#/' + page.id)，它不会被硬编码。

标签： angularjs

【解决方案1】：

Ng级就是为此而生的。在 ng-class 的角度文档页面上查看 cmets，因为它没有很好的记录。

【讨论】：

【解决方案2】：

用于重复链接的 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/

【讨论】：

您的 jsfiddle 似乎无法正常工作。 “活动”类仅在点击时添加？尝试将 .active 颜色更改为“绿色”，它仅适用于页面加载。
它不起作用，因为没有连接任何路由提供程序。这只是一个演示，向您展示如何实现它。
啊，我想我在尝试时错过了一些细节，例如我的 url 是 /#/foo 所以我需要检查 location.path() 排除“/”即@987654324 @。会再试一次。
如果是这种情况，我只需修改链接以在 url 中包含 /。

【解决方案3】：

作为您起点的作者，我更新了小提琴，因此它现在应该适用于您的动态网址:)。

angular.module('link', []).
  directive('activeLink', ['$location', function(location) {
  return {
      restrict: 'A',
      link: function(scope, element, attrs, controller) {
          var clazz = attrs.activeLink;
          scope.location = location;
          scope.$watch('location.path()', function(newPath) {
              if (attrs.href.substring(1) === newPath) {  //<------ Here it is already interpolated
                element.addClass(clazz);
              } else {
                element.removeClass(clazz);
              }
          });
      }

  };

  }]).
  controller('MyCtrl', ['$scope', function(scope) {
    scope.pages=[
       { url: "one", name: "One"},
       { url: "two", name: "Two"},
       { url: "three", name: "Three"},
       { url: "", name: "home"}
    ];
  }]);

http://jsfiddle.net/p3ZMR/59/

问题是，指令在插入之前读取 href 属性。我只是对它进行了某种更改，在插入后，href 会被读出。

【讨论】：

【解决方案4】：

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

HTML

<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);
    };
}

【讨论】：