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:

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

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 .  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>

Langgan ke blog saya.

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