Eu am o pereche de aplicaţii care face $http.get() apeluri şi am vrut să fie în măsură pentru a afişa un mesaj de eroare de frumos formatate cu urât eroare detalii ascunse, dar accesibile.  Practic, Acest lucru:

Şi apoi în cazul în care utilizatorul face clic pe eroarea, ei văd mai multe informaţii:

Lucruri simple.  Din moment ce exact aceeaşi eroare potenţiale pot apărea în ecranul administrative, precum şi ecranul de utilizatorul final, Acesta numit în mod clar de directivă unghiulare personalizate.  I  găsit acest remarcabilă serie de articole (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) de mare Dan Wahlin.  Urmând sfatul lui, Am creat foarte repede o <Bună ziua-lume> Directiva şi sa mutat pe la meu mai complexe eroare de afişare racleta. Am fugit într-un pic de probleme cu prezenta directivă mai complexe.  Fericit, un fel de întâmplare, Mi-a spus WebStorm (editorul folosesc aceste zile) că fişierul JS a fost un fişier unghiulare şi a ajutat-mi dau seama problema.  Acesta este codul pentru Directiva în sine:

angular.module("CDLApp").Directiva("generalCdlErrorHandler", funcţia() {

    reveni {
        limita: "E",
        înlocui: adevărat,

        domeniul de aplicare: {
            retrieveLastConfigurationError: "&"
        },

        şablon:
          '<div clasa = "alertă-pericol de alertă" rolul = "alerta" ng-init = "doShowExpandedErrorDetails = true" ng-Arată = "retrieveLastConfigurationError()">' +
          "A fost o eroare de I/O sau alte.  Acest lucru se întâmplă, de obicei, deoarece fișierul de date de configurare nu a putut fi " +
          "găsit sau fişierul de configurare conţine informaţii inexacte (cum ar fi o bibliotecă de documente de referinţă " +
          "care nu exista).' +
          '  <br />' +
          '  <div ng-Arată = "doShowExpandedErrorDetails">' +
          '    <o href = "#" ng-clic = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Click aici pentru a ascunde detalii." +
          '    </o>: ' +
          '    <br />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <br />' +
          '  </div>' +
          '  <div ng-Arată = "!doShowExpandedErrorDetails">' +
          '    <o href = "#" ng-clic = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Click aici pentru a extinde detaliile de eroare." +
          '    </o>' +
          '  </div>' +
          '</div>'
    };
});

Practic, Eu sunt crearea de un element nou numit un "generalCdlErrorHandler".  Are nevoie de acces la o funcţie numită retrieveLastConfigurationError şi care este manipulat în obiectul de aplicare.  Am, probabil, ar putea doar folosit societăţii-mamă de aplicare, dar asta se simte leneş.  Dacă cineva crede că ar trebui să au făcut asta, Mi-ar plăcea să aud despre asta în Comentarii.

Acest lucru a fost tot fin, dar nu am fost obtinerea nimic.  Nici o eroare a apărut în consolă (cel puţin o dată am stabilit toate erorile de sx am creat pe drum).  Pur şi simplu nu am lua orice ieşire din prezenta directivă.  Am mers şi a adăugat unele text static înainte de directivă ng-Arată şi * a * obţine că. Acest lucru făcut să mă gândesc că, probabil, Directiva nu a fost permis să implicit crea vars noi ca "doShowExpandedErrorDetails" sau au un "ng-init" acolo. 

M-am dus înapoi în HTML pentru a vedea dacă am avut un tip şi de această dată WebStorm m-au ajutat.  Am avut fost trece în funcţia de retrieveLastConfigurationError ca aceasta:

<retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError generale-cdl--handler de erori()">
</general-cdl--handler de erori>

Dar într-adevăr nevoie să fie acest lucru:

<general-cdl-eroare-handler prelua-ultimul-configurare-eroare = "CDLController.retrieveLastConfigurationError()">
</general-cdl--handler de erori>

WebStorm a fost destul de inteligent pentru a şti că a trebuit să fie despărţite în silabe.  Dacă aceasta nu ar fi furnizat această sugestie, Am ar, probabil, fie încă depanare acest lucru .  Distracţie ori!

Trucul este aceasta: nu numai este numele elementului Directiva despărţite în silabe, Deci sunt orice atributele adăugaţi la acesta.  După ce am adăugat cratimelor, totul a lucrat mare.  Diana tutorial întâmplat de a folosi numele scurt singur, Deci nu am face legătura.

Sper că acest lucru vă ajută cineva.

</scop>

Aboneaza-te la blog-ul meu.

Urmaţi-mă pe Twitter, la http://www.twitter.com/pagalvin

Acest blog posturi descrie cum puteţi avea mai multe Angular.js pe bază de părți web SharePoint (referite prin o parte web editor de conţinut) pe aceeaşi pagină. Sunt de asteptare un editor de conţinut web parte (CEWP) ce referinţe JavaScript construită folosind cadrul de Angular.js o "unghiulare Web parte."

Procesul de bootstrap unghiulară pe este foarte uşor şi doar despre fiecare exemplu veţi găsi pe internet merge ceva de genul:

<HTML ng-app = 'AplicMea'>

<bla /><bla /><bla />

</HTML>

Acest lucru se descompune, cu toate acestea, Dacă doriţi pentru a permite mai multe CEWP reprezentând multiple părţi web unghiulară pe aceeaşi pagină. Unghiulară va numai automat bootstrap împotriva primei directive ng-app se constată – cel puţin începând cu versiunea unghiulare 1.3.6. Soluţia este destul de simplă-manual bootstrap codul în schimb. Cele de mai sus acum modificări la ceva de genul asta:

<corpul>
<dIV id =”bootstrapHere” ng-controller =”myController ca theController”>
<bla /><bla /><bla />
</div>
</corpul>

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

<script-ul>
angular.bootstrap(angular.element(document.getElementById(“bootstrapHere”)),['AplicMea']);
</script-ul>

Practic, în loc să utilizaţi ng-app pe element pentru a face dumneavoastră procesul de bootstrap, vă palmă un ID pe acel element. Apoi, utilizaţi bootstrap() metoda de unghiulară în sine pentru a controla procesul de bootstrap procesul de la run-time. Am testat acest lucru cu trei părţi web unghiulare diferite pe aceeaşi pagină şi funcţionează un farmec.

</scop>

Aboneaza-te la blog-ul meu.

Urmaţi-mă pe Twitter, la http://www.twitter.com/pagalvin