AngularJS active는 현재 페이지의 링크 에서 클래스를 설정하는 데 어떤 도움을 줍니까 ?
나는 이것이 행해지는 마법의 방법이 있다고 생각하지만 찾을 수없는 것 같습니다.
내 메뉴는 다음과 같습니다
<ul>
<li><a class="active" href="/tasks">Tasks</a>
<li><a href="/actions">Tasks</a>
</ul>그리고 나는 나의 경로에있는 그들 각각의 컨트롤러를 가지고 TasksController와 ActionsController.
그러나 a컨트롤러 에 대한 링크 에서 “active”클래스를 바인딩하는 방법을 알 수 없습니다 .
힌트가 있습니까?
답변
보기에
<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>컨트롤러에서
$scope.getClass = function (path) {
return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}이를 통해 작업 링크에는 ‘/ tasks'(예 : ‘/ tasks / 1 / reports’)로 시작하는 모든 URL에 활성 클래스가 있습니다.
답변
링크에 지시문을 사용하는 것이 좋습니다.
그러나 아직 완벽하지는 않습니다. 해시 뱅을 조심하십시오;)
지시문에 대한 자바 스크립트는 다음과 같습니다.
angular.module('link', []).
directive('activeLink', ['$location', function (location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function (newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);다음은 html에서 사용되는 방법입니다.
<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>
</div>이후 CSS로 스타일링하기 :
.active { color: red; }답변
다음은 Angular와 잘 작동하는 간단한 접근 방식입니다.
<ul>
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>AngularJS 컨트롤러 내에서 :
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
};이 스레드에는 다른 유사한 답변이 많이 있습니다.
Angular JS로 부트 스트랩 navbar 활성 클래스를 설정하는 방법은 무엇입니까?
답변
토론에 내 두 센트를 추가하기 위해 순수한 각도 모듈 (jQuery 없음)을 만들었으며 데이터가 포함 된 해시 URL 과도 작동합니다. (예를 들어 #/this/is/path?this=is&some=data)
모듈을 종속성으로 그리고 auto-active메뉴의 조상 중 하나에 추가하기 만하면 됩니다. 이처럼 :
<ul auto-active>
<li><a href="#/">main</a></li>
<li><a href="#/first">first</a></li>
<li><a href="#/second">second</a></li>
<li><a href="#/third">third</a></li>
</ul>그리고 모듈은 다음과 같습니다 :
(function () {
angular.module('autoActive', [])
.directive('autoActive', ['$location', function ($location) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
function setActive() {
var path = $location.path();
if (path) {
angular.forEach(element.find('li'), function (li) {
var anchor = li.querySelector('a');
if (anchor.href.match('#' + path + '(?=\\?|$)')) {
angular.element(li).addClass('active');
} else {
angular.element(li).removeClass('active');
}
});
}
}
setActive();
scope.$on('$locationChangeSuccess', setActive);
}
}
}]);
}());(물론 지시문 부분을 사용할 수 있습니다)
또한 빈 해시 (예 : example.com/#그냥 example.com)에 대해서는 작동하지 않는다는 사실에 주목할 가치가 example.com/#/있습니다 example.com#/. 그러나 이것은 ngResource 등에서 자동으로 발생합니다.
그리고 여기 바이올린이 있습니다 : http://jsfiddle.net/gy2an/8/
답변
내 경우에는 탐색을 담당하는 간단한 컨트롤러를 만들어서이 문제를 해결했습니다.
angular.module('DemoApp')
.controller('NavigationCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.isCurrentPath = function (path) {
return $location.path() == path;
};
}]);그리고 ng-class를 요소에 다음과 같이 추가하면됩니다.
<ul class="nav" ng-controller="NavigationCtrl">
<li ng-class="{ active: isCurrentPath('/') }"><a href="#/">Home</a></li>
<li ng-class="{ active: isCurrentPath('/about') }"><a href="#/about">About</a></li>
<li ng-class="{ active: isCurrentPath('/contact') }"><a href="#/contact">Contact</a></li>
</ul>답변
답변
ng-class변수와 CSS 클래스를 바인딩 하는 지시문 이 있습니다 . 또한 객체 (className 대 bool 값 쌍)도 허용합니다.
예를 들면 다음과 같습니다. http://plnkr.co/edit/SWZAqj
