Arkib Bulanan: Februari 2015

Petua Trouble-Shooting untuk sudut arahan (Atau, Belajar untuk menyukai sengkang sekali lagi)

Saya mempunyai beberapa apps yang membuat $http.get() panggilan dan saya ingin dapat tayang mesej ralat baik diformat dengan butir-butir ralat hodoh yang tersembunyi, tetapi boleh diakses.  Pada asasnya, ini:

image

Dan jika pengguna klik pada ralat, mereka melihat maklumat lanjut:

image

Hal-hal yang mudah.  Kerana tepat ralat potensi yang sama boleh muncul di skrin pentadbiran serta skrin pengguna akhir, Ia jelas menuntut arahan sudut adat.  Saya  Adakah ini siri cemerlang artikel-artikel (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) oleh yang hebat Dan Wahlin.  Berikutan nasihat beliau, Saya dengan cepat telah mencipta satu <Hello dunia> arahan dan bergerak ke squeegee paparan ralat saya lebih kompleks. Aku berlari ke dalam sedikit masalah dengan arahan ini lebih kompleks.  Bahagia, semacam kebetulan, Saya telah memberitahu WebStorm (editor yang saya gunakan hari ini) bahawa fail JS adalah satu fail sudut dan ia membantu saya memikirkan isu ini.  Ini adalah kod untuk arahan itu sendiri:

angular.Module("CDLApp").arahan("generalCdlErrorHandler", fungsi() {

kembali {
mengehadkan: "E",
menggantikan: benar,

Skop: {
retrieveLastConfigurationError: "&"
},

template:
'<DIV class = "memberi amaran berjaga-jaga-bahaya" peranan = "memberi amaran" Ng-init = "doShowExpandedErrorDetails = true" Ng-Tunjuk "retrieveLastConfigurationError =()">' +
' Jadilah ralat I/O atau lain-lain kesalahan. Ini biasanya berlaku kerana Konfigurasi fail data tidak boleh ' +
' dijumpai atau fail konfigurasi itu mengandungi maklumat yang tidak tepat (seperti rujukan Perpustakaan dokumen ' +
' yang tidak wujud).' +
' <br />' +
' <Bhg. ng-Tunjuk = "doShowExpandedErrorDetails">' +
' <a href = "#" Ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'Klik di sini untuk menyembunyikan maklumat.' +
' </1>: ' +
' <br />' +
' <pra>{{retrieveLastConfigurationError() | JSON}}</pra>' +
' <br />' +
' </div>' +
' <Bhg. ng-Tunjuk = "!doShowExpandedErrorDetails">' +
' <a href = "#" Ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'Klik di sini untuk mengembangkan butiran ralat.' +
' </1>' +
' </div>' +
'</div>'
};
});

Pada asasnya, Saya sedang membuat elemen baru yang dipanggil "generalCdlErrorHandler".  Ia memerlukan akses kepada fungsi yang dipanggil retrieveLastConfigurationError dan bahawa ia akan dikendalikan dalam objek skop.  Saya mungkin dapat hanya menggunakan skop ibu/bapa, tetapi yang terasa malas.  Sesiapa yang menyangka saya harus melakukan yang, Saya akan senang mendengar tentang hal itu dalam komen.

Ini semua baik-baik saja, tetapi saya tidak mendapat apa-apa.  Tiada ralat yang muncul dalam konsol (sekurang-kurangnya sekali aku tetap semua ralat sx saya mencipta duka).  Saya hanya tidak mendapat sebarang output daripada petunjuk.  Saya pergi dan ditambah beberapa teks statik sebelum arahan ng-Tunjuk dan * pula * mendapatkan bahawa. Ini membuat saya berfikir bahawa mungkin arahan tidak dibenarkan tersirat mencipta vars baru seperti "doShowExpandedErrorDetails" atau satu "ng-init" di sana. 

Saya pergi semula ke HTML untuk melihat jika saya mempunyai sejenis dan buat masa ini WebStorm membantu saya.  Saya telah lulus dalam fungsi retrieveLastConfigurationError seperti ini:

<retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError Ketua-cdl-ralat-pengendali()">
</am-cdl-ralat-pengendali>

Tetapi ia benar-benar perlu berada ini:

<am-cdl-ralat-pengendali mendapatkan semula-terakhir-tatarajah-ralat = "CDLController.retrieveLastConfigurationError()">
</am-cdl-ralat-pengendali>

WebStorm adalah cukup pintar untuk mengetahui bahawa ia pasti akan hyphenated.  Jika ia tidak memberikan petunjuk bahawa, Saya akan mungkin akan masih menyelesaikan masalah ini Smile.  Masa untuk berseronok!

Silap mata ini: bukan sahaja nama elemen arahan hyphenated, begitu juga mana-mana atribut yang anda menambah kepadanya.  Sebaik sahaja saya menambah sengkang dalam, Semua bekerja hebat.  Dan tutorial berlaku untuk menggunakan nama-nama tunggal yang pendek, supaya aku tidak membuat sambungan.

Harap ini membantu seseorang.

</akhir>

undefinedLanggan ke blog saya.

Mengikuti aku di Twitter http://www.twitter.com/pagalvin

IE9 Benar-benar tidak suka apabila awak pintasan dengan anda <span> Tags

Saya telah jatuh ke dalam satu tabiat buruk menggunakan Chrome sepanjang masa.  Ia adalah "buruk" kerana barang-barang yang saya membangunkan benar-benar memerlukan untuk menjalankan banyak pelayar web lain, termasuk, Malangnya IE8.  Laptop kerja saya mempunyai IE9 standard atas sebab-sebab) dan saya hanya lakukan cepat semak untuk melihat Apakah perkara-perkara yang kelihatan seperti dan... ia tidak cantik.  Sebagai contoh:

image

Ia mempunyai * sepatutnya * kelihatan seperti ini:

image

 

Bukan sahaja itu mati, tetapi acara-acara klik saya tidak melepaskan tembakan.  (Sebahagian besar daripada mereka, anyway).

Visual, Ia kelihatan seperti perkara mula pergi rel berhampiran pautan "Persediaan lanjutan".  Saya digali ke dalam bahagian HTML dan mendapati bahawa aku ini selari:

<rentang class = "glyphicon glyphicon--tetingkap baru" />

Yang seolah-olah seperti sintaks yang dibenarkan ("Chrome versi 40.02214.94 m"adalah baik dengan). Saya pergi dan berubah juga, seperti yang ditunjukkan:

<rentang class = "glyphicon glyphicon--tetingkap baru"></span>

Yang tetap ia.

Kecil kecil sesuatu disebabkan apa-apa berantakan besar dari skrin.  Masa untuk berseronok.

Ini berlaku supaya cepat, tetapi ianya juga jenis perkara yang hanya mendapat tulang belakang anda daripada penjajaran bila anda melihatnya.  Terdapat lebih 500 baris-baris HTML dalam fungsi admin yang sedikit ini dan anda hanya ingin untuk mendapati diri anda menggali antara rumpai yang, pernah Smile.

</akhir>

undefinedLanggan ke blog saya.

Mengikuti aku di Twitter http://www.twitter.com/pagalvin