angularjs 로 현재 메뉴에 avtive 상태 표기하기
angularjs 로 현재 메뉴에 avtive 상태 표기하기
대분류 메뉴 아래 dropdown 메뉴의 class='active' 시켜본다.
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a is-active-nav href="productListM.html#MAP1">Tees</a></li>
<li><a is-active-nav href="productListM.html#MAP2">Shirts</a></li>
<li><a is-active-nav href="productListM.html#MAP3">Sweaters & Sweatshirts</a></li>
<li><a is-active-nav href="productListM.html#MAP4">Bottoms</a></li>
<li><a is-active-nav href="productListM.html#MAP5">OuterWear</a></li>
<li><a href="404.html">*sample404</a></li>
</ul>
</li>
스크립트)
app.directive('isActiveNav', ['$location', function ($location) {
return {
restrict: 'A',
link: function (scope, element) {
scope.location = $location;
scope.$watch('location.path()', function (currentPath) {
if (currentPath == element[0].hash.replace("#", "/")) {
element.parent().addClass('active');
} else {
element.parent().removeClass('active');
}
});
}
};
}]);
angular.module 은 한 page에 일단 하나만 하도록.
html tag에
<html lang="en" ng-app="myApp">
출처) http://blog.bastisteiner.com/entry/add-active-to-menu-with-angularjs