AngularJS - Adding class to $routeProvider placeholder links

Question

A follow up to the answer provided here: AngularJS - Changing a query param term within $routeProvider?

When using route params, is it possible to set an 'active' class to the element or it's parent element? Here is what I've tried, but the 'active' class is not added onto the parent element.

Is the issue that I am facing because of the '/:feed_term' placeholder that I am using?

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

And the html looks like this:

<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>

Any feedback would greatly be appreciated!

Thanks! Roc.

Answer 1

Remember that your views cannot access data unless it is attached to the scope. Your view accesses $route.current, but that data isn't on the scope. Based on the code you've posted, something like this should work:

.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>