Rumah >hujung hadapan web >tutorial js >Mewujudkan modal yang berkesudahan di sudut angular dengan penghala ui sudut
Mewujudkan modal yang berkesudahan di sudut angular dengan penghala ui sudut
- 尊渡假赌尊渡假赌尊渡假赌asal
- 2025-02-20 11:45:12576semak imbas
3
Terdapat beberapa cara untuk mendekati pelaksanaan modal dalam aplikasi AngularJS, termasuk perkhidmatan-perkhidmatan dialog yang popular dan modal bootstrap Angular-UI rasmi. Dalam artikel ini saya akan berkongsi bagaimana saya suka mengendalikan modal dalam sudut, menggunakan perkhidmatan angular-UI yang lain, ui-router. 
Modal
Penghala UI Angular boleh digunakan untuk membuat modal negara dalam aplikasi AngularJS. Ini melibatkan memasang penghala UI, menambahkannya ke aplikasi sudut, dan menentukan keadaan untuk setiap modal.
Penghala UI menyediakan arahan yang dipanggil UI-View untuk menentukan di mana template negeri harus dimuatkan. Ini digunakan bersempena dengan keadaan modal modal ibu bapa dan kanak -kanak untuk membuat dan mengurus modal.
- Peralihan ke keadaan yang berbeza boleh menutup modal negara. Penghala UI sudut menyediakan panggil balik OneNenter dan OneXit yang api ketika memasuki dan meninggalkan negeri, yang boleh digunakan untuk menubuhkan pendengar acara untuk menutup modal.
- merawat modal sebagai negara menawarkan faedah seperti negara bersarang, panggil balik, parameter negara dan suntikan pergantungan, dan kebolehgunaan URL. Ia juga membolehkan navigasi lancar antara modal yang berbeza dalam aplikasi.
- Berfikir di negeri
- Idea teras di sebalik pendekatan ini adalah bahawa modal sebenarnya adalah keadaan unik aplikasi anda. Pertimbangkan tapak e-dagang. Apabila anda mengklik butang "Tambah ke Cart", modal muncul meminta anda untuk log masuk. Anda memasukkan butiran anda dan klik "Teruskan", yang menunjukkan modal lain dengan butiran kereta anda.
- Anda baru saja melintasi beberapa negeri yang hanya berlaku dalam modal. Jika kita memikirkan modal sebagai negeri, maka masuk akal untuk menggunakan alat pengurusan negeri untuk pergi ke dan dari negara modal yang berbeza.
Bermula dengan penghala UI
mari kita simpan mudah untuk bermula dengan. Pertama, kami akan memasang UI-Router dan menambahkannya ke aplikasi Angular kami.
1. Buat halaman HTML yang mudah
kita akan mulakan dengan membuat fail index.html dengan kandungan berikut:
jQuery telah dimasukkan untuk beberapa kerja DOM di kemudian hari.
Di samping termasuk versi terkini Angular sendiri, saya telah memasukkan penghala UI sudut, fail CSS (kini kosong), dan tentu saja fail JavaScript utama aplikasi kami. Mari kita lihat yang seterusnya.
2. Buat aplikasi sudut anda
<span><span><!doctype html></span> </span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
Fail app.js sangat mudah pada ketika ini. Kami hanya membuat modul untuk ModalApp kami dan kemudian menambah UI.Router sebagai kebergantungan:
<span><span><!doctype html></span> </span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
3. Menggalakkan antara muka
Sebelum kita boleh membuka modal, kita memerlukan UI untuk pengguna berinteraksi. Dalam contoh ini saya menyimpan perkara yang mudah dengan "tambah ke butang kereta" dalam index.html:
angular<span>.module("modalApp", ["ui.router"])</span>
4. Konfigurasikan keadaan awal
Kami akan menentukan beberapa negeri untuk setiap modal kami, tetapi terdapat sedikit persediaan yang perlu kami lakukan terlebih dahulu. Oleh kerana kemungkinan kita ingin berkongsi tingkah laku antara modal yang berbeza, mari kita buat keadaan modal induk bahawa modal individu kita kemudiannya boleh mewarisi dari. Kod berikut tergolong dalam js/app.js:
<span><span><!doctype html></span> </span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span> </span> <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span> </span> <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
Kami telah menentukan keadaan yang dipanggil "modal". Ia adalah keadaan abstrak yang bermaksud ia tidak boleh secara langsung beralih ke. Ia hanya berfungsi sebagai ibu bapa kepada negara -negara kanak -kanak itu untuk menawarkan fungsi bersama. Kami juga menentukan templat untuk pandangan bernama (juga dipanggil modal). Menamakan pandangan anda adalah idea yang baik untuk mengelakkan negara-negara yang salah memuat ke tempat yang salah dalam aplikasi anda, terutama jika anda menggunakan router UI untuk negara-negara lain dalam aplikasi anda.
5. Tentukan Arahan U-View untuk modal kami untuk dimuatkan keROUTER UI menggunakan arahan yang dipanggil UI-View untuk menentukan di mana template negara harus dimuatkan. Kami akan memasukkan arahan UI-View pada halaman index.html kami:
angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span> $stateProvider<span>.state("Modal", {
</span> <span>views:{
</span> <span>"modal": {
</span> <span>templateUrl: "modal.html"
</span> <span>}
</span> <span>},
</span> <span>abstract: true
</span> <span>});
</span><span>});</span> Oleh kerana kita menamakan pandangan kita "modal", kita perlu lulus ini ke Arahan juga. Tetapan autoscroll = "palsu" menghalang router UI daripada cuba menatal modal ke dalam pandangan. 6. Membuat modal sebenar pertama kami
mari kita mendefinisikan modal sebenar pertama kami. Kami akan membuat pop timbul yang meminta pengguna jika mereka yakin mereka mahu menambah produk ke kereta mereka.
<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span>
</span> <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span>
</span> <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span>
</span>
<span><span><span><div</span> ui-view<span>="modal"</span> autoscroll<span>="false"</span>></span><span><span></div</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span> mudah seperti itu. Kami menentukan keadaan Confirmaddtocart baru sebagai anak modal menggunakan notasi titik penghala. Kami juga menetapkan templat untuk modal baru kami. Oleh kerana modal ConfirmaddTocart adalah anak dari keadaan modal, router UI akan mencari arahan UI-View dalam template modal (modal.html) untuk menjadikan templat mengesahkan. Mari buat kedua -dua templat ini seterusnya.
7. Buat Templat Negeri Modal Asas
Templat Modal State bertanggungjawab untuk mewujudkan latar belakang telus untuk menutup aplikasinya, serta pemegang macam, di mana kita akan memuatkan templat negara anak kita yang berbeza.
Berikut adalah beberapa gaya asas yang tergolong dalam css/app.css:
angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span> $stateProvider<span>.state("Modal", {
</span> <span>views:{
</span> <span>"modal": {
</span> <span>templateUrl: "modal.html"
</span> <span>}
</span> <span>},
</span> <span>abstract: true
</span> <span>});
</span>
$stateProvider<span>.state("Modal.confirmAddToCart", {
</span> <span>views:{
</span> <span>"modal": {
</span> <span>templateUrl: "modals/confirm.html"
</span> <span>}
</span> <span>}
</span> <span>});
</span><span>});</span>
8. Buat Templat Sahkan Modal
<span><span><span><div</span> class<span>="Modal-backdrop"</span>></span><span><span></div</span>></span> </span><span><span><span><div</span> class<span>="Modal-holder"</span> ui-view<span>="modal"</span> autoscroll<span>="false"</span>></span><span><span></div</span>></span></span>
Templat ini adalah untuk kotak modal sebenar dengan mesej mengesahkan di dalamnya. Kod berikut dimasukkan dalam modal/mengesahkan.html:
Styling untuk Modal-Box:
<span>*
</span><span>{
</span> <span>box-sizing: border-box;
</span><span>}
</span>
<span><span>.Modal-backdrop</span>
</span><span>{
</span> <span>position: fixed;
</span> <span>top: 0px;
</span> <span>left: 0px;
</span> <span>height:100%;
</span> <span>width:100%;
</span> <span>background: #000;
</span> <span>z-index: 1;
</span> <span>opacity: 0.5;
</span><span>}
</span>
<span><span>.Modal-holder</span>
</span><span>{
</span> <span>position: fixed;
</span> <span>top: 0px;
</span> <span>left: 0px;
</span> <span>height:100%;
</span> <span>width:100%;
</span> <span>background: transparent;
</span> <span>z-index: 2;
</span> <span>padding: 30px 15px;
</span><span>}</span>
<span><span><!doctype html></span> </span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
9. Wayar semuanya
Sekarang kita mempunyai keadaan modal induk dengan negara kanak -kanak, dan kedua -dua templat mereka, semua yang tersisa untuk dilakukan sebenarnya mencetuskan modal. UI-ROUTER memberikan kita arahan yang dipanggil UI-SREF yang berkelakuan sama dengan atribut HREF dari tag utama. Ia pada dasarnya akan menghubungkan kami dengan nama negeri yang kami sediakan.
angular<span>.module("modalApp", ["ui.router"])</span>
Sekarang, apabila kita mengklik butang, penghala akan menavigasi kami ke keadaan modal.confirmaddtocart. Templat Modal Negeri akan dimuatkan terlebih dahulu ke dalam arahan U-View di Index.html. Ini akan menunjukkan latar belakang kami dan menyediakan pemegangnya. Kemudian, dialog Pengesahan Putih akan dimuatkan ke dalam arahan UI-View dalam templat modal induk dan Hey Presto! Kami mempunyai modal!
10. Menutup modal
Perkara pertama yang mungkin anda perhatikan, adalah bahawa anda tidak boleh menutup modal. Mari kita selesaikan itu.
Angularui Router menyediakan kami dengan panggilan balik OneNenter dan Onexit yang memadamkan ketika memasuki dan meninggalkan negeri. Kami akan menggunakan panggilan balik OneNenter untuk menubuhkan beberapa pendengar acara yang akan menutup modal. Tetapi itu menimbulkan persoalan: bagaimana kita sebenarnya menutupnya? Menutup modal berasaskan negeri hanyalah soal peralihan ke keadaan yang berbeza. Sama ada keadaan modal berasal dari atau hanya beberapa lalai, keadaan tidak terpulang kepada anda. Buat masa ini, mari buat keadaan lalai kosong dan gunakannya untuk menavigasi dari keadaan modal kami.
<span><span><!doctype html></span> </span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span> </span> <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span> </span> <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
Acara -acara yang kami sediakan agak remeh. Kami hanya perlu mendengar kunci ESC, dan juga untuk sebarang klik pada latar belakang. Selain itu, panggilan e.stoppropagation () telah ditambah untuk mengelakkan klik di dalam modal yang menggelegak ke latar belakang dan menutup modal secara tidak sengaja.
pergi ke hadapan dan uji keluar.
11. Peralihan ke modal lain
Sekarang kita boleh membuka dan menutup modal, kita dapat melihat kekuatan sebenar pendekatan ini. Bukan sahaja bersih dan bermakna untuk mempunyai setiap modal yang diwakili oleh negara, tetapi ia membolehkan kita melintasi negara -negara dalam modal tersebut.
kami mula meminta pengguna mengesahkan pembelian mereka. Sekarang, mari kita tunjukkan mesej kejayaan mereka dalam modal lain. Sekali lagi, kita hanya akan menentukan keadaan baru dan templat yang berkaitan:
angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span> $stateProvider<span>.state("Modal", {
</span> <span>views:{
</span> <span>"modal": {
</span> <span>templateUrl: "modal.html"
</span> <span>}
</span> <span>},
</span> <span>abstract: true
</span> <span>});
</span><span>});</span>
<span><span><!doctype html></span>
</span><span><span><span><html</span> ng-app<span>="modalApp"</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><title</span>></span>Modals with Angular and Ui-Router<span><span></title</span>></span>
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/app.css"</span> /></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/jquery.min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular.min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/angular-ui-router.min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> type<span>="text/javascript"</span> src<span>="js/app.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><h3</span>></span>Pusheen Hoodie<span><span></h3</span>></span>
</span> <span><span><span><p</span>></span>Now you too can look like Pusheen!<span><span></p</span>></span>
</span> <span><span><span><button</span>></span>Add to cart<span><span></button</span>></span>
</span>
<span><span><span><div</span> ui-view<span>="modal"</span> autoscroll<span>="false"</span>></span><span><span></div</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
Sekarang, semua yang perlu dilakukan adalah menghubungkan butang "ya" dari modal mengesahkan, ke keadaan kejayaan baru. Walaupun kami berada di sana, kami boleh menambah butang "tidak" yang menghubungkan ke keadaan lalai kami untuk menutup modal.
angular<span>.module("modalApp", ["ui.router"]).config(function($stateProvider) {
</span> $stateProvider<span>.state("Modal", {
</span> <span>views:{
</span> <span>"modal": {
</span> <span>templateUrl: "modal.html"
</span> <span>}
</span> <span>},
</span> <span>abstract: true
</span> <span>});
</span>
$stateProvider<span>.state("Modal.confirmAddToCart", {
</span> <span>views:{
</span> <span>"modal": {
</span> <span>templateUrl: "modals/confirm.html"
</span> <span>}
</span> <span>}
</span> <span>});
</span><span>});</span>
dan di sana anda memilikinya! Modal berasaskan negara, dilayari. Saya mendapati bahawa merawat modal sebagai negeri adalah cara api yang pasti untuk memastikan pengguna anda mempunyai pengalaman yang lancar apabila menggunakan modal dalam aplikasi anda.
Oleh kerana modal hanya menyatakan, anda mendapat semua manfaat tambahan yang lain dari penghala UI sudut, termasuk:
- negeri bersarang - anda boleh menjadikan negeri -negeri lain dalam modal anda
- Callbacks - melepaskan peristiwa apabila modal anda dibuka atau ditutup untuk memaklumkan bahagian lain aplikasi anda
- Param Negeri dan Suntikan Ketergantungan - Lulus data ke modal anda dengan param negeri atau kebergantungan menyuntik perkhidmatan data ke dalam pengawal negeri anda
- URL - Negeri -negeri adalah makna URI yang boleh diperbaiki anda boleh mempunyai URL yang menghubungkan ke modal, cantik nifty
Semua kod dari artikel ini boleh didapati di GitHub. Saya ingin mendengar maklum balas anda mengenai pendekatan ini untuk modal di AngularJS jadi sila, tinggalkan komen :)
Soalan Lazim (Soalan Lazim) Mengenai Membuat Modal Berkagut dengan AngularJS dan Angular UI Router
Bagaimanakah saya membuat modal negara menggunakan AngularJS dan Angular UI Router? Pertama, anda perlu memasang AngularJS dan Router UI Angular dalam projek anda. Kemudian, anda perlu menentukan keadaan untuk modal anda dalam konfigurasi aplikasi anda. Keadaan ini harus memasukkan templat atau templateurl yang menunjuk kepada kandungan HTML modal anda. Anda kemudian boleh menggunakan perkhidmatan $ negeri untuk membuka modal anda. Ingatlah untuk menyuntik $ ke dalam pengawal anda untuk menggunakannya. Mereka membolehkan anda mengekalkan keadaan permohonan anda, walaupun modal dibuka. Ini bermakna anda boleh menavigasi dari modal dan kembali ke sana tanpa kehilangan sebarang data. Modal Stateful juga membolehkan anda menggunakan butang belakang penyemak imbas untuk menutup modal, yang dapat meningkatkan pengalaman pengguna. Perkhidmatan Negeri di AngularJS membolehkan anda beralih antara negeri -negeri dalam permohonan anda. Untuk membuka modal, anda boleh menggunakan kaedah $ state.go, lulus dalam nama keadaan yang mewakili modal anda. Ini akan menyebabkan angularjs memuatkan templat yang berkaitan dengan keadaan itu dan memaparkannya sebagai modal. AngularJS melibatkan menggunakan perkhidmatan $ StateProvider dalam konfigurasi aplikasi anda. Anda boleh menggunakan kaedah $ StateProvider.State untuk menentukan keadaan baru, melewati objek yang menentukan nama, URL, dan template negeri atau templateurl. Templat atau templateurl harus menunjuk kepada kandungan HTML modal anda. tanpa mengekalkan keadaan. Walau bagaimanapun, ini bermakna anda kehilangan manfaat modal negara, seperti keupayaan untuk menavigasi dari modal dan kembali ke sana tanpa kehilangan sebarang data. Jika anda tidak memerlukan ciri -ciri ini, anda hanya boleh menggunakan perkhidmatan $ uibmodal untuk membuat modal.
Bagaimanakah saya menutup modal yang berkesempatan di AngularJS? Ini akan menyebabkan AngularJs memunggah templat modal dan menutup modal. Anda juga boleh menggunakan butang belakang penyemak imbas untuk menutup modal jika anda telah mengkonfigurasi modal anda untuk menjadi stateful. modal negara dengan versi lain sudut. Walau bagaimanapun, proses untuk mewujudkan modal negara mungkin berbeza -beza bergantung kepada versi sudut yang anda gunakan. Sentiasa merujuk kepada dokumentasi sudut rasmi untuk maklumat yang paling tepat dan terkini. Kesilapan boleh dikendalikan menggunakan acara $ StatechangeError. Acara ini disiarkan pada skop akar apabila ralat berlaku semasa peralihan negeri. Anda boleh mendengar acara ini di pengawal anda dan mengambil tindakan yang sesuai apabila ia berlaku. Dalam AngularJS. Ini boleh dilakukan dengan menggunakan pilihan Params apabila menentukan keadaan modal anda. Opsyen Params membolehkan anda menentukan mana -mana parameter yang harus dihantar kepada pengawal modal apabila modal dibuka. Angularjs boleh dilakukan dengan menggunakan alat ujian terbina dalam Angular. Anda boleh menggunakan perkhidmatan $ negeri untuk beralih ke keadaan modal anda dan kemudian periksa bahawa templat modal telah dimuatkan dengan betul. Anda juga boleh menguji sebarang fungsi dalam pengawal modal anda menggunakan Perkhidmatan Pengawal $ Angular.
Atas ialah kandungan terperinci Mewujudkan modal yang berkesudahan di sudut angular dengan penghala ui sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
JavaScript jquery css bootstrap html angular Object define if for while date include Error continue using Interface Attribute Event JS number default dom this href display transition github idea ui router Other
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ganti Buat dengan JakeArtikel seterusnya：Ganti Buat dengan Jake
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional