AngularJS'de şu şekilde ayarlanmış rotalarım var:
$routeProvider
.when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
.when('/lab', {templateUrl:'partials/lab', controller:widgetsController})
Üst çubukta sekme stilinde bazı bağlantılar var. Mevcut şablona veya url'ye bağlı olarak bir sekmeye 'etkin' sınıfı nasıl ekleyebilirim?
Yanıtlar:
Bunu URL'lere güvenmek zorunda kalmadan çözmenin bir yolu, $routeProvideryapılandırma sırasında her parçaya aşağıdaki gibi özel bir özellik eklemektir :
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: widgetsController,
activetab: 'dashboard'
}).
when('/lab', {
templateUrl: 'partials/lab.html',
controller: widgetsController,
activetab: 'lab'
});
$routeDenetleyicinizde gösterin :
function widgetsController($scope, $route) {
$scope.$route = $route;
}
activeSınıfı mevcut etkin sekmeye göre ayarlayın :
<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>
$scope.activeTab = $route.current.activetabbiraz daha temiz tutabilmek için daha iyi ayarlayın .
$rootScopeBunu tüm kapsamlarda kullanılabilir kılmak için aşağıdaki @ Lucas'ın hilesi ile birleştirin .
Bunu yapmanın bir yolu ngClass yönergesini ve $ location hizmetini kullanmaktır. Şablonunuzda şunları yapabilirsiniz:
ng-class="{active:isActive('/dashboard')}"
isActiveaşağıdaki gibi tanımlanan bir kapsamda bir işlev nerede olurdu:
myApp.controller('MyCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
İşte tam jsFiddle: http://jsfiddle.net/pkozlowski_opensource/KzAfG/
ng-class="{active:isActive('/dashboard')}"Her gezinme sekmesinde tekrarlamak yorucu olabilir (çok sayıda sekmeniz varsa), bu nedenle bu mantık çok basit bir direktif için aday olabilir.
Pavel'in özel bir yönerge kullanma tavsiyesine uyarak, burada routeConfig'e yük eklemeyi gerektirmeyen, süper bildirime dayalı ve yalnızca hangisine slice()dikkat ettiğinizi değiştirerek yolun herhangi bir düzeyine tepki verecek şekilde uyarlanabilen bir sürüm var . .
app.directive('detectActiveTab', function ($location) {
return {
link: function postLink(scope, element, attrs) {
scope.$on("$routeChangeSuccess", function (event, current, previous) {
/*
Designed for full re-usability at any path, any level, by using
data from attrs. Declare like this:
<li class="nav_tab">
<a href="#/home" detect-active-tab="1">HOME</a>
</li>
*/
// This var grabs the tab-level off the attribute, or defaults to 1
var pathLevel = attrs.detectActiveTab || 1,
// This var finds what the path is at the level specified
pathToCheck = $location.path().split('/')[pathLevel] ||
"current $location.path doesn't reach this level",
// This var finds grabs the same level of the href attribute
tabLink = attrs.href.split('/')[pathLevel] ||
"href doesn't include this level";
// Above, we use the logical 'or' operator to provide a default value
// in cases where 'undefined' would otherwise be returned.
// This prevents cases where undefined===undefined,
// possibly causing multiple tabs to be 'active'.
// now compare the two:
if (pathToCheck === tabLink) {
element.addClass("active");
}
else {
element.removeClass("active");
}
});
}
};
});
Hedeflerimize , yola $routeChangeSuccessbir tane yerleştirmek yerine olayı dinleyerek $watchulaşıyoruz. Sanırım her $digestdöngüde ateşi izlediğim için bunun mantığın daha az çalışması gerektiği inancıyla çalışıyorum .
Yönerge bildiriminde yol düzeyi argümanınızı ileterek onu çağırın. Bu, hrefözniteliğinizle eşleştirmek istediğiniz geçerli $ location.path () yığınını belirtir .
<li class="nav_tab"><a href="#/home" detect-active-tab="1">HOME</a></li>
Dolayısıyla, sekmelerinizin yolun temel seviyesine tepki vermesi gerekiyorsa, '1' argümanını yapın. Böylece location.path () "/ home" olduğunda, içindeki "# / home" ile eşleşecektir href. Yolun ikinci seviyesine veya üçüncü veya 11'ine tepki vermesi gereken sekmeleriniz varsa, buna göre ayarlayın. Bu 1 veya daha büyük dilimleme, dizin 0'da yaşayacak olan href içindeki kötü '#' işaretini atlayacaktır.
Tek gereksinim, <a>eleman hrefmevcut yolla karşılaştıracağı bir özniteliğin varlığını varsaydığı için bir üzerinde çağırmanızdır . Bununla birlikte, <li>ya da başka bir şeyi çağırmayı tercih ettiyseniz, bir ebeveyn ya da çocuk unsuru okumak / yazmak için oldukça kolay uyum sağlayabilirsiniz . Bunu kazıyorum çünkü basitçe pathLevel argümanını değiştirerek onu birçok bağlamda yeniden kullanabilirsiniz. Mantıkta okunacak derinlik varsayılmışsa, gezinmenin birden çok bölümüyle kullanmak için yönergenin birden çok sürümüne ihtiyacınız olacaktır.
DÜZENLEME 18/3/14: Çözüm yetersiz bir şekilde genelleştirildi ve undefinedher ikisine $location.path()ve öğelerine karşı dönen 'activeTab' değeri için bir bağımsız değişken tanımladıysanız etkinleşirdi href. Çünkü: undefined === undefined. Bu durumu düzeltmek için güncellendi.
Bunun üzerinde çalışırken, bunun gibi bir şablon yapısına sahip bir üst öğe üzerinde tanımlayabileceğiniz bir sürüm olması gerektiğini fark ettim:
<nav id="header_tabs" find-active-tab="1">
<a href="#/home" class="nav_tab">HOME</a>
<a href="#/finance" class="nav_tab">Finance</a>
<a href="#/hr" class="nav_tab">Human Resources</a>
<a href="#/quarterly" class="nav_tab">Quarterly</a>
</nav>
Bu sürümün artık uzaktan Bootstrap tarzı HTML'ye benzemediğini unutmayın. Ancak, daha modern ve daha az öğe kullanıyor, bu yüzden ben de buna düşkünüm. Yönergenin bu sürümü ve orijinali artık Github'da bir bağımlılık olarak bildirebileceğiniz bir açılır modül olarak mevcuttur. Herhangi biri gerçekten kullanıyorsa, onları Bower-ize etmekten mutlu olurum.
Ayrıca, <li>'s içeren önyükleme uyumlu bir sürüm istiyorsanız, bu orijinal gönderiden sonra çıktığını düşündüğüm ve belki de bundan daha açıklayıcı olan angular-ui-bootstrap Tabs modülünü tercih edebilirsiniz . Temel şeyler için daha az özlüdür, ancak size devre dışı bırakılan sekmeler ve etkinleştirildiğinde ve devre dışı bırakıldığında tetiklenen bildirim olayları gibi bazı ek seçenekler sunar.
ulve belki de sadece bir navveya başka bir gruplama öğesi tarafından sarılmış çapa koleksiyonları olması gerektiğini düşünmeye başlıyorum . li'In ara katmanıyla uğraşmak, getirisi olmayan ek bir karmaşıklıktır, özellikle de şimdi navneler olup bittiğini açıklığa kavuşturmak için elimizde olan unsur var.
@ rob-juurlink Çözümünüzü biraz geliştirdim:
etkin bir sekmeye ihtiyaç duyan her rota yerine; ve her denetleyicide etkin sekmeyi ayarlamam gerekiyor, bunu yapıyorum:
var App = angular.module('App',[]);
App.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: Ctrl1
}).
when('/lab', {
templateUrl: 'partials/lab.html',
controller: Ctrl2
});
}]).run(['$rootScope', '$location', function($rootScope, $location){
var path = function() { return $location.path();};
$rootScope.$watch(path, function(newVal, oldVal){
$rootScope.activetab = newVal;
});
}]);
Ve HTML buna benziyor. Activetab, yalnızca o rotayla ilgili url'dir. Bu, her denetleyiciye kod ekleme ihtiyacını ortadan kaldırır (kullanılmalarının tek nedeni buysa $ route ve $ rootScope gibi bağımlılıkları sürükleyerek)
<ul>
<li ng-class="{active: activetab=='/dashboard'}">
<a href="#/dashboard">dashboard</a>
</li>
<li ng-class="{active: activetab=='/lab'}">
<a href="#/lab">lab</a>
</li>
</ul>
Belki böyle bir yönerge sorununuzu çözebilir: http://jsfiddle.net/p3ZMR/4/
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>
JS
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 bot return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
En basit çözüm burada:
Angular JS ile bootstrap navbar aktif sınıfı nasıl ayarlanır?
Hangisi:
Ng görünümünün dışında tek bir denetleyiciyi çalıştırmak için ng-denetleyiciyi kullanın:
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
<li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
<li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
ve controllers.js'ye dahil edin:
function HeaderController($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
Yalnızca çoklu ve iç içe görünümleri desteklemekle kalmayan, aynı zamanda bu tür işleri çok kolaylaştıran state.ui modülünü kullanmanızı öneririm (aşağıdaki kod alıntılanmıştır):
<ul class="nav">
<li ng-class="{ active: $state.includes('contacts') }"><a href="#{{$state.href('contacts')}}">Contacts</a></li>
<li ng-class="{ active: $state.includes('about') }"><a href="#{{$state.href('about')}}">About</a></li>
</ul>
Okumaya değer.
İşte, bir yol düzeyi yerine bir arama dizesi kullanan, domi'nin LI değişikliğiyle XMLillies'in başka bir sürümü. Sanırım bu benim kullanım durumum için neler olduğu biraz daha açık.
statsApp.directive('activeTab', function ($location) {
return {
link: function postLink(scope, element, attrs) {
scope.$on("$routeChangeSuccess", function (event, current, previous) {
if (attrs.href!=undefined) { // this directive is called twice for some reason
// The activeTab attribute should contain a path search string to match on.
// I.e. <li><a href="#/nested/section1/partial" activeTab="/section1">First Partial</a></li>
if ($location.path().indexOf(attrs.activeTab) >= 0) {
element.parent().addClass("active");//parent to get the <li>
} else {
element.parent().removeClass("active");
}
}
});
}
};
});
HTML artık şöyle görünüyor:
<ul class="nav nav-tabs">
<li><a href="#/news" active-tab="/news">News</a></li>
<li><a href="#/some/nested/photos/rawr" active-tab="/photos">Photos</a></li>
<li><a href="#/contact" active-tab="/contact">Contact</a></li>
</ul>
XMLilley'in yanıtlayıcısını en iyi, en uyarlanabilir ve müdahaleci buldum.
Ancak küçük bir aksaklık yaşadım.
Bootstrap nav ile kullanmak için onu şu şekilde değiştirdim:
app.directive('activeTab', function ($location) {
return {
link: function postLink(scope, element, attrs) {
scope.$on("$routeChangeSuccess", function (event, current, previous) {
/* designed for full re-usability at any path, any level, by using
data from attrs
declare like this: <li class="nav_tab"><a href="#/home"
active-tab="1">HOME</a></li>
*/
if(attrs.href!=undefined){// this directive is called twice for some reason
// this var grabs the tab-level off the attribute, or defaults to 1
var pathLevel = attrs.activeTab || 1,
// this var finds what the path is at the level specified
pathToCheck = $location.path().split('/')[pathLevel],
// this var finds grabs the same level of the href attribute
tabLink = attrs.href.split('/')[pathLevel];
// now compare the two:
if (pathToCheck === tabLink) {
element.parent().addClass("active");//parent to get the <li>
}
else {
element.parent().removeClass("active");
}
}
});
}
};
});
"İf (attrs.href! = Undefined)" ekledim çünkü bu işlev açıkça iki kez çağrıldı, ikinci kez hata veriyor.
Html'ye gelince:
<ul class="nav nav-tabs">
<li class="active" active-tab="1"><a href="#/accueil" active-tab="1">Accueil</a></li>
<li><a active-tab="1" href="#/news">News</a></li>
<li><a active-tab="1" href="#/photos" >Photos</a></li>
<li><a active-tab="1" href="#/contact">Contact</a></li>
</ul>
Bootstrap örneği.
Yönlendirmede yerleşik Angulars kullanıyorsanız (ngview) bu yönerge kullanılabilir:
angular.module('myApp').directive('classOnActiveLink', [function() {
return {
link: function(scope, element, attrs) {
var anchorLink = element.children()[0].getAttribute('ng-href') || element.children()[0].getAttribute('href');
anchorLink = anchorLink.replace(/^#/, '');
scope.$on("$routeChangeSuccess", function (event, current) {
if (current.$$route.originalPath == anchorLink) {
element.addClass(attrs.classOnActiveLink);
}
else {
element.removeClass(attrs.classOnActiveLink);
}
});
}
};
}]);
İşaretlemenizin şöyle göründüğünü varsayarsak:
<ul class="nav navbar-nav">
<li class-on-active-link="active"><a href="/orders">Orders</a></li>
<li class-on-active-link="active"><a href="/distributors">Distributors</a></li>
</ul>
Özniteliğinizde istediğiniz sınıf adını ayarlayabildiğiniz için bunu yapmaktan hoşlandım.
Ayrıca konumu kapsama dahil edebilir ve bunu gezinme stilini çıkarmak için kullanabilirsiniz:
function IndexController( $scope, $rootScope, $location ) {
$rootScope.location = $location;
...
}
O halde şunlarda kullanın ng-class:
<li ng-class="{active: location.path() == '/search'}">
<a href="/search">Search><a/>
</li>
alternatif bir yol, ui-sref-active kullanmaktır
İlgili ui-sref yönergesinin durumu etkin olduğunda bir öğeye sınıflar eklemek ve etkin olmadığında bunları kaldırmak için ui-sref ile birlikte çalışan bir yönerge. Birincil kullanım durumu ui-sref'e bağlı olarak gezinme menülerinin özel görünümünü, "etkin" durumun menü düğmesinin farklı görünmesini sağlayarak, onu etkin olmayan menü öğelerinden ayırarak basitleştirmektir.
Kullanım:
ui-sref-active = 'class1 class2 class3' - "class1", "class2" ve "class3" sınıflarının her biri, ilgili ui-sref durumu etkin olduğunda yönerge öğesine eklenir ve etkin olmadığında kaldırılır.
Örnek:
Aşağıdaki şablon verildiğinde,
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
</li>
<!-- ... -->
</ul>
uygulama durumu "app.user" olduğunda ve "bilbobaggins" değerine sahip "user" durum parametresini içerdiğinde, ortaya çıkan HTML şu şekilde görünecektir:
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
</li>
<!-- ... -->
</ul>
Sınıf adı, yönerge bağlantı süresi boyunca bir kez enterpolasyonludur (enterpolasyonlu değerde yapılacak diğer değişiklikler göz ardı edilir). Boşlukla ayrılmış bir biçimde birden çok sınıf belirtilebilir.
Seçenekleri $ state.go () 'ya geçirmek için ui-sref-opts direktifini kullanın. Misal:
<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
Rob'un denetleyicide özel bir özniteliğe sahip olmakla ilgili gönderisine katılıyorum. Görünüşe göre yorum yapacak kadar temsilcim yok. İşte istenen jsfiddle:
örnek html
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="link in links" ng-class="{active: $route.current.activeNav == link.type}"> <a href="{{link.uri}}">{{link.name}}</a>
</li>
</ul>
</div>
örnek app.js
angular.module('MyApp', []).config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/a', {
activeNav: 'a'
})
.when('/a/:id', {
activeNav: 'a'
})
.when('/b', {
activeNav: 'b'
})
.when('/c', {
activeNav: 'c'
});
}])
.controller('MyCtrl', function ($scope, $route) {
$scope.$route = $route;
$scope.links = [{
uri: '#/a',
name: 'A',
type: 'a'
}, {
uri: '#/b',
name: 'B',
type: 'b'
}, {
uri: '#/c',
name: 'C',
type: 'c'
}, {
uri: '#/a/detail',
name: 'A Detail',
type: 'a'
}];
});
'use strict';
angular.module('cloudApp')
.controller('MenuController', function ($scope, $location, CloudAuth) {
$scope.menu = [
{
'title': 'Dashboard',
'iconClass': 'fa fa-dashboard',
'link': '/dashboard',
'active': true
},
{
'title': 'Devices',
'iconClass': 'fa fa-star',
'link': '/devices'
},
{
'title': 'Settings',
'iconClass': 'fa fa-gears',
'link': '/settings'
}
];
$location.path('/dashboard');
$scope.isLoggedIn = CloudAuth.isLoggedIn;
$scope.isAdmin = CloudAuth.isAdmin;
$scope.isActive = function(route) {
return route === $location.path();
};
});
Ve şablonda aşağıdakileri kullanın:
<li role="presentation" ng-class="{active:isActive(menuItem.link)}" ng-repeat="menuItem in menu"><a href="{{menuItem.link}}"><i class="{{menuItem.iconClass}}"></i> {{menuItem.title}}</a></li>
Denetleyicilerde değişiklik gerektirmeyen bir çözüme ihtiyacım vardı, çünkü bazı sayfalarda yalnızca şablonlar oluşturuyoruz ve denetleyici yok. Kullanmayı öneren önceki yorumculara teşekkürler, $routeChangeSuccessbunun gibi bir şey buldum:
# Directive
angular.module('myapp.directives')
.directive 'ActiveTab', ($route) ->
restrict: 'A'
link: (scope, element, attrs) ->
klass = "active"
if $route.current.activeTab? and attrs.flActiveLink is $route.current.activeTab
element.addClass(klass)
scope.$on '$routeChangeSuccess', (event, current) ->
if current.activeTab? and attrs.flActiveLink is current.activeTab
element.addClass(klass)
else
element.removeClass(klass)
# Routing
$routeProvider
.when "/page",
templateUrl: "page.html"
activeTab: "page"
.when "/other_page",
templateUrl: "other_page.html"
controller: "OtherPageCtrl"
activeTab: "other_page"
# View (.jade)
a(ng-href='/page', active-tab='page') Page
a(ng-href='/other_page', active-tab='other_page') Other page
URL'lere bağlı değildir ve bu nedenle herhangi bir alt sayfa vb. İçin ayarlamak gerçekten çok kolaydır.
Bu yöntemi nerede bulduğumu hatırlayamıyorum ama oldukça basit ve iyi çalışıyor.
HTML:
<nav role="navigation">
<ul>
<li ui-sref-active="selected" class="inactive"><a ui-sref="tab-01">Tab 01</a></li>
<li ui-sref-active="selected" class="inactive"><a ui-sref="tab-02">Tab 02</a></li>
</ul>
</nav>
CSS:
.selected {
background-color: $white;
color: $light-blue;
text-decoration: none;
border-color: $light-grey;
}
NgRoute kullanıyorsanız (yönlendirme için) uygulamanızın yapılandırması aşağıda olacaktır,
angular
.module('appApp', [
'ngRoute'
])
config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
}
});
Şimdi, bu yapılandırmaya aşağıdaki gibi bir denetleyici ekleyin,
angular
.module('appApp', [
'ngRoute'
])
config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
activetab: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
activetab: 'about'
})
}
})
.controller('navController', function ($scope, $route) {
$scope.$route = $route;
});
Yapılandırmanızda aktif sekmeden bahsettiğiniz gibi, şimdi <li>veya <a>etiketinize aktif sınıf eklemeniz yeterlidir. Sevmek,
ng-class="{active: $route.current.activetab == 'about'}"
Bu, kullanıcı hakkında sayfaya her tıkladığında, bu otomatik olarak geçerli sekmeyi tanımlayacak ve aktif css sınıfını uygulayacaktır.
Umarım bu yardımcı olur!
Çözüm için buraya geldim .. Yine de yukarıdaki çözümler iyi çalışıyor ancak onları biraz karmaşık bulduk. Hala kolay ve temiz bir çözüm arayanlar için, görevi mükemmel bir şekilde yerine getirecektir.
<section ng-init="tab=1">
<ul class="nav nav-tabs">
<li ng-class="{active: tab == 1}"><a ng-click="tab=1" href="#showitem">View Inventory</a></li>
<li ng-class="{active: tab == 2}"><a ng-click="tab=2" href="#additem">Add new item</a></li>
<li ng-class="{active: tab == 3}"><a ng-click="tab=3" href="#solditem">Sold item</a></li>
</ul>
</section>