CODEWITHSUNDEEP
angularjs
photoscene
photoscene

Reputation: 57

AngularJS how to add active class to element with directive if there are menus in ng-repeat and also outside of it

I looked through all the solutions here but none of them worked. I have a menu which consist of an ng-repeat with 3 items and then 2 extra ones outside of the repeat. My solution works on the links which are outside of the ng-repeat but remain active in it.

The markup:

<li ng-repeat="category in mainCategories" activenav="" active="active">
   <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{category.name}}</a>
</li>
<li activenav="" active="active">
    <a href="#" >Lick section</a>
</li>
<li ng-show="header.user.loggedIn" activenav="" active="active">
   <a href="#" >Memberships</a>
</li>

The directive:

(function(){
angular.module('activeNavs', [])

.directive('activenav', function () {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: {
            active: '='
        },
        template: '<li ng-click="active = $id" ng-class="{active: $id === active}" ng-transclude></li>'
    };
});
})();

Upvotes: 1

Views: 438

Answers (1)

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

Try this:

<div ng-init="obj = {}">
 <li ng-repeat="category in mainCategories" activenav="" active="obj.active">
   <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{category.name}}</a>
 </li>
 <li activenav="" active="obj.active">
    <a href="#" >Lick section</a>
 </li>
 <li ng-show="header.user.loggedIn" activenav="" active="obj.active">
   <a href="#" >Memberships</a>
 </li>
</div>

You need an reference to sync your data in both ways. If you just write active you just get the value in your directive.

Upvotes: 1

Related Questions