photoscene photoscene - 6 months ago 40
AngularJS Question

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

Answer

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.