Saya punya beberapa aplikasi yang membuat $http.get() panggilan dan saya ingin untuk dapat menunjukkan pesan kesalahan yang diformat dengan baik dengan rincian kesalahan jelek yang tersembunyi, tetapi dapat diakses.  Pada dasarnya, ini:

Dan kemudian jika pengguna mengklik pada kesalahan, mereka melihat Info lebih lanjut:

Hal-hal sederhana.  Karena kesalahan potensial yang tepat sama dapat muncul di layar administratif serta layar pengguna akhir, itu jelas menyerukan sudut arahan kustom.  SAYA  menemukan ini seri yang luar biasa Artikel (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) Oleh Agung Dan Wahlin.  Mengikuti nasihatnya, Saya sangat cepat membuat <Halo-dunia> direktif dan pindah ke kesalahan tampilan squeegee saya lebih kompleks. Aku berlari ke sedikit kesulitan dengan direktif ini lebih kompleks.  Bahagia, semacam kebetulan, Saya telah mengatakan WebStorm (editor saya menggunakan hari ini) bahwa JS file file sudut dan itu membantu saya mencari tahu masalah.  Ini adalah kode untuk direktif sendiri:

angular.module("CDLApp").direktif("generalCdlErrorHandler", fungsi() {

    kembali {
        membatasi: "E",
        ganti: benar,

        Ruang lingkup: {
            retrieveLastConfigurationError: "&"
        },

        template:
          '<div kelas = "peringatan peringatan-bahaya" peran = "waspada" ng-init = "doShowExpandedErrorDetails = true" ng-Tampilkan = "retrieveLastConfigurationError()">' +
          ' Ada i/o error atau kesalahan lainnya.  Hal ini biasanya terjadi karena file data konfigurasi tidak bisa ' +
          ' ditemukan atau file konfigurasi berisi informasi yang tidak akurat (seperti referensi perpustakaan dokumen ' +
          ' yang tidak ada).' +
          '  <br />' +
          '  <div ng-Tampilkan = "doShowExpandedErrorDetails">' +
          '    <href = "#" ng-klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'Klik di sini untuk menyembunyikan rincian.' +
          '    </a>: ' +
          '    <br />' +
          '    <pra>{{retrieveLastConfigurationError() | JSON}}</pra>' +
          '    <br />' +
          '  </div>' +
          '  <div ng-Tampilkan = "!doShowExpandedErrorDetails">' +
          '    <href = "#" ng-klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'Klik di sini untuk memperluas rincian kesalahan.' +
          '    </a>' +
          '  </div>' +
          '</div>'
    };
});

Pada dasarnya, Saya membuat sebuah elemen baru yang disebut "generalCdlErrorHandler".  Itu membutuhkan akses ke fungsi yang disebut retrieveLastConfigurationError dan yang ditangani dalam cakupan obyek.  Aku mungkin bisa hanya menggunakan orangtua lingkup, tapi yang merasa malas.  Jika ada yang berpikir aku harus melakukan itu, Saya akan senang mendengar tentang hal itu di komentar.

Ini adalah semua baik-baik saja, tetapi saya tidak mendapatkan apa-apa.  Tidak ada kesalahan yang muncul di konsol (setidaknya sekali aku tetap semua kesalahan sx saya membuat sepanjang jalan).  Aku hanya tidak mendapatkan output dari direktif.  Aku pergi dan menambahkan beberapa teks statis sebelum direktif ng-show dan * melakukan * mendapatkan bahwa. Ini membuat saya berpikir bahwa mungkin direktif tidak diizinkan untuk secara implisit membuat baru vars seperti "doShowExpandedErrorDetails" atau "ng-init" di sana. 

Aku kembali ke HTML untuk melihat jika aku tipe dan kali ini WebStorm membantu saya keluar.  Saya telah lewat dalam fungsi retrieveLastConfigurationError seperti ini:

<Umum-cdl--handler kesalahan retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Umum-cdl--handler kesalahan>

Tapi itu benar-benar diperlukan untuk ini:

<Umum-cdl-kesalahan-penangan mengambil-terakhir-konfigurasi-kesalahan = "CDLController.retrieveLastConfigurationError()">
</Umum-cdl--handler kesalahan>

WebStorm adalah cukup pintar untuk tahu bahwa itu harus menjadi hyphenated.  Jika itu tidak memberikan petunjuk yang, Saya akan mungkin akan masih pemecahan masalah ini .  Fun kali!

Trik ini: tidak hanya nama elemen direktif hyphenated, Jadi adalah atribut apapun Anda menambahkan untuk itu.  Begitu saya menambahkan tanda hubung, itu semua bekerja hebat.  Dan tutorial yang terjadi menggunakan nama tunggal yang pendek, Jadi saya tidak membuat sambungan.

Semoga ini bisa membantu seseorang.

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin