8

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

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

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

4

4 回答 4

5

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

于 2013-05-16T01:31:59.470 回答
2

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

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 将被读出。

于 2013-08-10T10:36:39.117 回答
1

一个主要的编程概念是关注点分离。我个人不喜欢在我的观点中保留逻辑或比较。我更愿意在 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);
    };
}
于 2014-03-10T19:12:58.770 回答
0

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

于 2013-05-15T21:43:56.193 回答