'Menu'에 해당되는 글 1건
- 2016.07.08
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
'web' 카테고리의 다른 글
| Test : SyntaxHighlighter 3.0.83 (0) | 2015.12.13 |
|---|---|
| highlight.js 테스트 (0) | 2015.12.12 |
PREV
