Угловой пользовательского интерфейса маршрутизатора: интерфейс-сref-активный и вложенных состояний
Я использую angular-ui-router
и вложенные состояния в моем приложении, и у меня также есть панель навигации. Панель навигации написана от руки и использует ui-sref-active
для выделения текущего состояния. Это двухуровневая панель навигации.
теперь, когда я, скажем Products / Categories
Я бы так Products
(уровень 1) и Categories
(на уровне 2) будет выделено. Однако, используя ui-sref-active
, если я в состоянии Products.Categories
тогда выделяется только это состояние, а не Products
.
там способ сделать Products
выделить в этом государстве?
7 ответов
вместо этого-
<li ui-sref-active="active">
<a ui-sref="posts.details">Posts</a>
</li>
вы можете сделать это-
<li ng-class="{active: $state.includes('posts')}">
<a ui-sref="posts.details">Posts</a>
</li>
в настоящее время он не работает. Здесь идет дискуссия (https://github.com/angular-ui/ui-router/pull/927) и, это будет добавлено в ближайшее время.
обновление:
для этого $state
должно быть доступно в поле зрения.
angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state;
}]);
обновление [2]:
версии 0.2.11
, он работает из коробки. Пожалуйста, проверьте связанную проблему:https://github.com/angular-ui/ui-router/issues/818
вот вариант, когда вы вложите несколько состояний, которые не связаны иерархически, и у вас нет контроллера, доступного для представления. Вы можете использовать фильтр UI-Router includedByState для проверки текущего состояния на любое количество именованных состояний.
<a ui-sref="production.products" ng-class="{active: ('production.products' |
includedByState) || ('planning.products' | includedByState) ||
('production.categories' | includedByState) ||
('planning.categories' | includedByState)}">
Items
</a>
TL; DR: множественные, несвязанные, именованные состояния должны применять активный класс по той же ссылке, и у вас нет контроллера? Использовать includedByState.
это решение:
<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
<a ui-sref="project.details">Details</a>
</li>
Edit:
вышеизложенное работает только для точного пути маршрута и не будет применять activeStyle к вложенным маршрутам. Это решение должно работать для этого:
<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>
допустим, дерево url выглядит следующим образом:
app (for home page) -> app.products -> app.products.category
использование:
<li ui-sref-active="active">
<a ui-sref="app.products">Products</a>
</li>
теперь, когда вы нажимаете на products
: только продукты будут активны.
если нажать на category
: оба продукта и категория будут активны.
если вы хотите, чтобы только категория была активной, если вы нажмете ее, вы должны использовать:ui-sref-active-eq
на продуктах, которые означают, что только он будет активен, а не это Чайлдс.
правильное использование в приложение.js:
angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: { ... }
})
// route for the aboutus page
.state('app.products', {
url:'products',
views: { ... }
})
// route for the contactus page
.state('app.products.category', {
url:'category',
views: { ... }
})
$urlRouterProvider.otherwise('/');
});
Так Просто, Шаг 1: добавьте контроллер для навигационной панели или в существующий контроллер, где включена навигационная панель, добавьте следующее
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
Шаг 2: в навигационной панели
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
вот и все.
UI router. Фрагмент кода, чтобы сделать панель навигации активной.
HTML-код
<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>
в CSS
is-active{
background-color: rgb(28,153,218);
}
внутри courseView.HTML-код
<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>
эта кнопка присутствует внутри вида курса, который перемещает вас к следующему виду i.e блог. и делает вашу навигационную панель подсвечивается.
найти аналогичный пример, демонстрационное угловое приложение ui-router: https://github.com/vineetsagar7/Angualr-UI-Router
мой код перешел из /productGroups в /productPartitions, что является единственным способом доступа к представлению "productPartitions".
поэтому я добавил скрытый якорь с ui-sref также установлен в "productPartitions" в том же элементе списка, который имеет ui-sref-active
<li ui-sref-active="active">
<a ui-sref="productGroups">
<i class="fa fa-magic"></i> Product groups </a>
<a ui-sref="productPartitions" style="display:none;"></a>
</li>
теперь кнопка навигации productGroups остается активной при доступе к любому виду