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>
Urmaţi-mă pe Twitter, la http://www.twitter.com/pagalvin
.