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

Blog ini posting menerangkan bagaimana anda boleh mempunyai pelbagai Angular.js berdasarkan bahagian web SharePoint (dirujuk melalui bahagian web editor kandungan) pada halaman yang sama. Saya menelefon editor kandungan web sebahagian (CEWP) bahawa rujukan JavaScript yang dibina menggunakan kerangka Angular.js yang "sudut bahagian Web."

Di sudut proses bootstrap super mudah dan hanya kira-kira setiap contoh yang anda dapati di internet pergi sesuatu seperti ini:

<HTML ng-aplikasi = 'myApp'>

<blah /><blah /><blah />

</html>

Ini rosak, Walau bagaimanapun, Jika anda ingin mengaktifkan berbilang CEWP mewakili pelbagai sudut web bahagian dalam halaman yang sama. Sudut akan hanya secara automatik bootstrap terhadap arahan ng-aplikasi pertama ia mendapati – sekurang-kurangnya versi sudut 1.3.6. Penyelesaian yang cukup mudah – secara manual bootstrap kod anda sebaliknya. Di atas kini berubah kepada sesuatu seperti ini:

<badan>
<div id =”bootstrapHere” Ng-pengawal =”myController sebagai theController”>
<blah /><blah /><blah />
</div>
</badan>

<script src =”//Ajax.googleapis.com/Ajax/libs/angularjs/1.3.6/angular.js”></skrip>

<skrip>
angular.bootstrap(angular.Element(document.getElementById(“bootstrapHere”)),['myApp']);
</skrip>

Pada asasnya, Alih-alih menggunakan ng-aplikasi pada elemen kaitan bootstrapping anda, anda Tepuk ID ke elemen itu. Kemudian, menggunakan bootstrap dalam() Kaedah sudut itu sendiri untuk mengawal bootstrapping yang memproses pada jangka-masa. Saya telah diuji ini dengan tiga bahagian web sudut yang berbeza pada halaman yang sama dan ia berfungsi azimat.

</akhir>

Langgan ke blog saya.

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