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
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>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>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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido?
Apr 04, 2025 pm 05:36 PM
Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...
Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan
Apr 10, 2025 am 09:33 AM
Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Adakah JavaScript sukar belajar?
Apr 03, 2025 am 12:20 AM
Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end?
Apr 04, 2025 pm 02:06 PM
Terokai pelaksanaan fungsi seretan panel dan drop panel seperti VSCode di bahagian depan. Dalam pembangunan front-end, bagaimana untuk melaksanakan vscode seperti ...
