Question

跟进此处提供的答案：AngularJS - Changing a query param term within $routeProvider?

使用route params时，是否可以为元素或其父元素设置'active'类？这是我尝试过的，但'active'类没有添加到父元素上。

由于我使用的'/：feed_term'占位符，我面临的问题是什么？

.config(function($routeProvider) {
  $routeProvider
    .when('/:feed_term', {templateUrl: 'views/feedlist.html', controller: 'searchtermCtrl', activetab: ':feed_term' })      

    .otherwise({redirectTo: '/term/'});
})

.controller('searchtermCtrl', function($scope, Feed, $routeParams, $route){
  $scope.feed = Feed.query({ feed : $routeParams.feed_term });
  $scope.activeTab = $route.current.activetab
})

html看起来像这样：

<li ng-class="{active: $route.current.activetab == 'feedterm_1'}">
  <a href="#/feedterm_1">Feed 1</a>
</li>
<li ng-class="{active: $route.current.activetab == 'feedterm_2'}">
  <a href="#/feedterm_2">Feed 2</a>
</li>

非常感谢任何反馈！

谢谢！ ROC。

Answer 1

请记住，除非视图附加到范围，否则您的视图无法访问数据。您的视图访问$route.current，但该数据不在范围内。根据您发布的代码，此类内容应该有效：

.config(function($routeProvider) {
  $routeProvider
    .when('/:feed_term', {
      templateUrl: 'views/feedlist.html',
      controller: 'searchtermCtrl'
    })
    .otherwise({redirectTo: '/term/'});
})

.controller('searchtermCtrl', function($scope, Feed, $routeParams){
  $scope.feed = Feed.query({ feed : $routeParams.feed_term });
  $scope.activeTab = $routeParams.feed_term
})

<li ng-class="{active: activeTab == 'feedterm_1'}">
  <a href="#/feedterm_1">Feed 1</a>
</li>
<li ng-class="{active: activeTab == 'feedterm_2'}">
  <a href="#/feedterm_2">Feed 2</a>
</li>

AngularJS - 将类添加到$ routeProvider占位符链接

1 个答案: