Jika saya memiliki navbar di bootstrap dengan item
Home | About | Contact
Bagaimana cara mengatur kelas aktif untuk setiap item menu ketika mereka aktif? Yaitu, bagaimana saya bisa mengatur class="active"
ketika rute sudut berada di
#/
untuk rumah#/about
untuk halaman tentang#/contact
untuk halaman kontak
javascript
twitter-bootstrap
angularjs
angularjs-directive
navbar
pengguna1876508
sumber
sumber
Jawaban:
Cara yang sangat elegan adalah dengan menggunakan ng-controller untuk menjalankan satu kontroler di luar tampilan-ng:
dan sertakan di controllers.js:
sumber
return $location.path().indexOf(viewLocation) == 0;
sebagai gantinya sehingga Anda dapat menangkap halaman dengan parameter jugaelegant
- nama rute misalnya/dogs
harus diduplikasi dalam panggilan keisActive('/dogs')
ui-sref-active/ui-sref-active-eq
arahan, yaitu.ui-sref-active-eq='active'
atauui-sref-active='active'
untuk mencapai hasil yang samaSaya baru saja menulis arahan untuk menangani hal ini, jadi Anda bisa menambahkan atribut
bs-active-link
ke<ul>
elemen induk , dan setiap kali rute diubah, ia akan menemukan tautan yang cocok, dan menambahkanactive
kelas ke yang sesuai<li>
.Anda dapat melihatnya beraksi di sini: http://jsfiddle.net/8mcedv3b/
Contoh HTML:
Javascript:
sumber
Anda dapat melihat di AngularStrap , arahan navbar tampaknya adalah yang Anda cari:
https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js
Untuk menggunakan arahan ini:
Unduh AngularStrap dari http://mgcrea.github.io/angular-strap/
Sertakan skrip di halaman Anda setelah bootstrap.js:
<script src="lib/angular-strap.js"></script>
Tambahkan arahan ke modul Anda:
angular.module('myApp', ['$strap.directives'])
Tambahkan arahan ke navbar Anda:
<div class="navbar" bs-navbar>
Tambahkan regex pada setiap item nav:
<li data-match-route="/about"><a href="#/about">About</a></li>
sumber
scope.$watch
)element
variabel diteruskan ke pemilih jquery?$('...', element)
mgcrea.ngStrap
tidak$strap.directives
Inilah pendekatan sederhana yang bekerja dengan baik dengan Angular.
Di dalam pengontrol AngularJS Anda:
sumber
Jika Anda bekerja dengan router Angular, direktif RouterLinkActive dapat digunakan dengan sangat elegan:
sumber
active
kelasnya harus di<li>
(Anda dapat menempatkan routerLinkActive dengan routerLink atau induknya)/
sebagai beranda, AndarouterLinkActive
akan menganggapnya aktif untuk URL apa pun yang dimulai dengan/
, misalnya/foo/
,/foo/bar
dll. Untuk mencocokkan dengan tepat, Anda perlurouterLinkActive="active" [routerLinkActiveOptions]="{exact:true}"
.Pertama dan terpenting, masalah ini dapat dipecahkan dengan banyak cara. Cara ini mungkin bukan yang paling elegan, tapi itu bekerja dengan baik.
Berikut adalah solusi sederhana yang harus Anda tambahkan ke proyek apa pun. Anda bisa menambahkan "pageKey" atau properti lain saat mengkonfigurasi rute yang bisa Anda gunakan untuk mematikan. Selain itu, Anda dapat mengimplementasikan pendengar pada metode $ routeChangeSuccess dari objek $ route untuk mendengarkan keberhasilan penyelesaian perubahan rute.
Ketika pawang Anda menembak Anda mendapatkan kunci halaman, dan menggunakan kunci itu untuk menemukan elemen yang harus "AKTIF" untuk halaman ini, dan Anda menerapkan kelas AKTIF.
Perlu diingat Anda membutuhkan cara untuk membuat SEMUA elemen "DI AKTIF". Seperti yang Anda lihat, saya menggunakan kelas .pageKey pada item nav saya untuk mematikan semuanya, dan saya menggunakan .pageKey_ {PAGEKEY} untuk menyalakannya secara individual. Mengalihkan semuanya ke tidak aktif, akan dianggap sebagai pendekatan naif, berpotensi Anda akan mendapatkan kinerja yang lebih baik dengan menggunakan rute sebelumnya untuk membuat hanya item aktif yang tidak aktif, atau Anda dapat mengubah pemilih jquery untuk hanya memilih item aktif yang dibuat tidak aktif. Menggunakan jquery untuk memilih semua item yang aktif mungkin merupakan solusi terbaik karena ini memastikan semuanya dibersihkan untuk rute saat ini jika ada bug css yang mungkin ada pada rute sebelumnya.
Yang berarti mengubah baris kode ini:
untuk yang ini
Berikut ini beberapa contoh kode:
Diberikan navbar bootstrap dari
Dan modul sudut dan pengontrol seperti berikut:
sumber
Anda benar-benar dapat menggunakan petunjuk angular-ui-utils '
ui-route
:atau:
Kontroler Header
Halaman indeks
Jika Anda menggunakan ui-utils, Anda mungkin juga tertarik dengan ui-router untuk mengelola tampilan parsial / bersarang.
sumber
Saya menemukan semua jawaban ini agak terlalu rumit bagi saya, maaf. Jadi saya telah membuat arahan kecil yang harus bekerja berdasarkan per navbar:
Pemakaian:
sumber
Saya menggunakan arahan kelas-ng dengan $ location untuk mencapainya.
Ini membutuhkan navbar untuk berada di dalam Kontroler utama dengan akses ke layanan $ location seperti ini:
sumber
Anda dapat mencapai ini dengan bersyarat dalam ekspresi sudut, seperti:
Yang sedang berkata, saya menemukan arahan sudut menjadi cara yang lebih "tepat" untuk melakukannya, meskipun outsourcing banyak mini-logika ini agak dapat mencemari basis kode Anda.
Saya menggunakan persyaratan untuk penataan GUI sesekali selama pengembangan, karena ini sedikit lebih cepat daripada membuat arahan. Saya tidak bisa memberi tahu Anda sebuah contoh di mana mereka benar-benar tetap di basis kode lama. Pada akhirnya saya mengubahnya menjadi arahan atau menemukan cara yang lebih baik untuk menyelesaikan masalah.
sumber
Jika Anda menggunakan ui-router , contoh berikut harus memenuhi kebutuhan Anda berdasarkan komentar @ DanPantry pada jawaban yang diterima tanpa menambahkan kode sisi pengontrol:
Anda dapat memeriksa dokumen untuk info lebih lanjut.
sumber
ui.router
!Jika Anda lebih suka tidak menggunakan AngularStrap maka arahan ini harus melakukan trik !. Ini adalah modifikasi dari https://stackoverflow.com/a/16231859/910764 .
JavaScript
HTML
Catatan: Kelas-kelas HTML di atas menganggap Anda menggunakan Bootstrap 3.x
sumber
Inilah pendapat saya. Sedikit kombinasi jawaban ditemukan di pos ini. Saya memiliki kasus yang sedikit berbeda, jadi solusi saya melibatkan memisahkan menu ke dalam template sendiri untuk digunakan dalam Directive Definition Ojbect kemudian menambahkan navbar saya ke halaman yang saya butuhkan. Pada dasarnya, saya memiliki halaman login yang tidak ingin saya sertakan pada menu saya, jadi saya menggunakan ngInclude dan masukkan arahan ini ketika login:
PENGARAHAN:
TEMPLATE LANGSUNG (templat / menu.html)
HTML YANG TERMASUK ARAH
Semoga ini membantu
sumber
Memperluas jawaban saya, saya membutuhkan ini untuk menangani struktur seperti ini.
-indeks
-events <-active
--- event-list
--- event-edit
--- event-map <-clicked
-tempat
--- tempat-daftar
--- tempat-edit
--- tempat-peta
jadi alih-alih mencocokkan, saya harus menggunakan indexOf, untuk memvalidasi tautan anak yang diformat agar sesuai dengan kondisi. Jadi untuk 'acara':
sumber
Ini adalah solusi sederhana
sumber
Sehubungan dengan jawaban @ Olivier's AngularStrap, saya juga menerapkan jawaban kevinknelson dari: https://github.com/twbs/bootstrap/issues/9013 .
Secara native, navbar Bootstrap3 tidak dirancang untuk aplikasi satu halaman (misalnya Angular) dan dengan demikian menu ketika pada layar kecil tidak runtuh saat klik.
sumber
JavaScript
HTML
sumber
Terima kasih kepada @Pylinux . Saya telah menggunakan tekniknya dan juga memodifikasinya untuk mendukung menu drop down "satu" (sub ul / li), karena itulah yang saya butuhkan. Lihat beraksi di tautan biola di bawah ini.
Diperbarui Fiddle berdasarkan jawaban pylinux - http://jsfiddle.net/abhatia/en4qxw6g/
Saya membuat tiga perubahan berikut, untuk mendukung menu drop-down satu tingkat:
1. Menambahkan nilai kelas dd (dropdown) untuk elemen "a" di bawah li yang perlu memiliki daftar sub ul.
2. Javascript Diperbarui untuk menambahkan logika baru berikut.
3. Diperbarui CSS untuk menambahkan yang berikut:
Semoga ini akan membantu seseorang yang ingin menerapkan menu dropdown tingkat tunggal.
sumber
Gunakan objek sebagai variabel sakelar.
Anda dapat melakukan inline ini cukup sederhana dengan:
Setiap kali Anda mengklik tautan, objek sakelar digantikan oleh objek baru di mana hanya properti sakelar objek yang benar yang benar. Properti yang tidak terdefinisi akan dievaluasi sebagai false sehingga elemen yang bergantung padanya tidak akan memiliki kelas aktif yang ditugaskan.
sumber
Anda juga dapat menggunakan arahan tautan aktif ini https://stackoverflow.com/a/23138152/1387163
Orang tua li akan mendapatkan kelas aktif ketika lokasi cocok / url :
sumber
Saya sarankan menggunakan arahan pada tautan. Ini biola.
Tapi ini belum sempurna. Hati-hati dengan hashbangs;)
Berikut adalah javascript untuk direktif:
dan inilah bagaimana ini akan digunakan dalam html:
setelah itu styling dengan css:
sumber
Hanya untuk menambahkan dua sen saya dalam debat saya telah membuat modul sudut murni (tanpa jquery), dan itu juga akan bekerja dengan hash url yang berisi data. ( ig
#/this/is/path?this=is&some=data
)Anda cukup menambahkan modul sebagai dependensi dan
auto-active
ke salah satu leluhur menu. Seperti ini:Dan modulnya terlihat seperti ini:
* (Tentu saja Anda bisa menggunakan bagian arahan)
** Perlu juga diperhatikan bahwa ini tidak bekerja untuk hash kosong ( ig
example.com/#
atau hanyaexample.com
) yang dibutuhkan setidaknyaexample.com/#/
atau adilexample.com#/
. Tapi ini terjadi secara otomatis dengan ngResource dan sejenisnya.sumber
Ini melakukan trik untuk saya:
maka Anda menggunakan jquery (berfungsi dengan sudut juga) untuk menambahkan kelas aktif
dan tentu saja css:
ini berfungsi jika Anda memiliki html seperti ini:
ini akan menambah kelas aktif menggunakan url halaman dan warna latar belakang Anda menjadi merah jika Anda di www.somesite.com/ee thaen ee adalah 'aplikasi' dan itu akan aktif
sumber
Ini sudah lama dijawab tetapi saya pikir saya akan berbagi dengan saya:
Templat:
Bagi yang menggunakan
ui-router
:Untuk pencocokan tepat (mis. Negara bagian?) Gunakan
$state.name === 'full/path/to/state'
atauui-sref-active-eq="active"
sumber
Inilah solusi lain untuk siapa saja yang mungkin tertarik. Keuntungan dari ini adalah ia memiliki lebih sedikit ketergantungan. Heck, itu bekerja tanpa server web juga. Jadi itu sepenuhnya sisi klien.
HTML:
Penjelasan:
Di sini kita membuat tautan secara dinamis dari model angular menggunakan direktif
ng-repeat
. Magic terjadi dengan metodeselectTab()
dangetTabClass()
didefinisikan dalam controller untuk navbar ini yang disajikan di bawah ini.Pengendali:
Penjelasan:
selectTab()
Metode ini disebut menggunakanng-click
direktif. Jadi ketika tautan diklik, variabelnyaselectedTab
diatur ke nama tautan ini. Dalam HTML Anda dapat melihat bahwa metode ini dipanggil tanpa argumen untuk tab Beranda sehingga akan disorot ketika halaman dimuat.The
getTabClass()
metode ini disebut melaluing-class
direktif dalam HTML. Metode ini memeriksa apakah tab itu sama dengan nilaiselectedTab
variabel. Jika benar, ia mengembalikan "aktif" yang lain mengembalikan "" yang diterapkan sebagai nama kelas berdasarkanng-class
arahan. Lalu apa pun css yang telah Anda terapkan ke kelasactive
akan diterapkan ke tab yang dipilih.sumber
Hanya Anda harus menambahkan
active
-class yang diperlukan dengan kode warna yang diperlukan.Ex:
ng-class="{'active': currentNavSelected}" ng-click="setNav"
sumber