Trouble shooting Patarimas kampinis direktyvų (Arba, Išmokime mylėti brūkšnelius visame vėl)

Turiu kelias programas kad padaryti $http.get() skambučius ir aš norėjau parodyti gražiai formatuotą klaidos pranešimą su bjaurusis klaidos informacija paslėpti, kad, bet prieinama.  Iš esmės, tai:

image

Ir tada jei vartotojas paspaudžia ant klaidos, jie mato daugiau informacijos:

image

Paprasti daiktai.  Kadangi tiksli pačią galimą klaidą gali būti administracinės ekrano, tiek galutinio vartotojo ekrano, jis aiškiai raginama pasirinktinį kampinis direktyvą.  AŠ  nustatėme, kad šis neįvykdyti ankstesnių serijų straipsnių (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) iš didžiojo Dan Wahlin.  Po jo patarimo, Aš labai greitai sukūriau tam <Sveiki pasaulis> direktyva ir perkeltas į mano sudėtingesnis klaidos ekranas valytuvas. Išbėgau į šiek tiek problemų su Šidirektyva sudėtingesnis.  Laimingai, tarsi netyčia, Man buvo pasakyta, WebStorm (redaktorius galiu naudoti šių dienų) kad JS failą buvo kampinis failą ir ji man padėjo išsiaiškinti problemą.  Tai yra kodas, pačioje direktyvoje:

angular.Module("CDLApp").Direktyvos("generalCdlErrorHandler", funkcija() {

grįžti {
apriboti: "E",
pakeisti: tiesa,

taikymo sritis: {
retrieveLastConfigurationError: "&"
},

šablonas:
'<div class = "pavojaus perspėjimo-pavojaus" vaidmenį = "įspėti" NG-init = "doShowExpandedErrorDetails = true" NG-Rodyti = "retrieveLastConfigurationError()">' +
"Įvyko įvesties/išvesties klaida ar kita klaida. Tai dažniausiai atsitinka todėl, kad konfigūracijos duomenų failas negali būti " +
"rasti ar konfigūracijos failas yra netiksli informacija (pvz., nuorodas į dokumentų biblioteką, kurioje " +
"kad neegzistuoja).' +
' <br />' +
' <div ng-Rodyti = "doShowExpandedErrorDetails">' +
' <a href = "#" NG-spustelėkite = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Spauskite čia Norėdami slėpti detales." +
' </a>: ' +
' <br />' +
' <Pre>{{retrieveLastConfigurationError() | JSON}}</Pre>' +
' <br />' +
' </DIV>' +
' <div ng-Rodyti = "!doShowExpandedErrorDetails">' +
' <a href = "#" NG-spustelėkite = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Spauskite čia Norėdami išplėsti Išsami klaidos informacija." +
' </a>' +
' </DIV>' +
'</DIV>'
};
});

Iš esmės, Aš sukurti naujas elementas vadinamas "generalCdlErrorHandler".  Ji turi prieigą prie funkcija vadinama retrieveLastConfigurationError ir kad yra tvarkomas apimtį objekto.  Aš tikriausiai galėjo tiesiog pasinaudoti tėvų sritį, bet kad mano tingus.  Jei kas nors mano, aš turėjo padaryti, Aš norėčiau išgirsti apie tai komentaruose.

Tai buvo viskas gerai, bet aš ne vis nieko.  Be klaidų popped į konsolės (ne rečiau kaip kartą poprawiłem aš sukūriau pakeliui sx klaidų).  Aš tiesiog ne gauti bet kuriame išėjime, iš Direktyvos.  Aš ir pridėti statinį tekstą prieš ng-Rodyti direktyvos ir I * ar * gauti, kad. Tai privertė mane galvoti, kad galbūt direktyva nebuvo leista netiesiogiai sukurti naują vars kaip "doShowExpandedErrorDetails" ar "ng init" ten. 

Aš grįžau į HTML pamatyti, jei aš tipo ir šį kartą WebStorm padėjo atlikti.  Aš turėjo buvo išlaikęs retrieveLastConfigurationError funkcija, kaip tai:

<General-cdl-klaidos-apdorojimo retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</General-cdl-klaidos-apdorojimo>

Bet tikrai reikia tai:

<General-cdl-klaidos-apdorojimo gauti-paskutiniais-konfigūracijos-klaida = "CDLController.retrieveLastConfigurationError()">
</General-cdl-klaidos-apdorojimo>

WebStorm buvo pakankamai gudri, kad žinau, kad jis turėjo kelti žodžius, skaičių.  Jei ji nebuvo pateikta kad užuomina, Aš taip greičiausiai būti dar problemų tai šypsena.  Įdomus kartus!

Pavyko tai: ne tik yra direktyva elemento pavadinimą brūkšnelį, taip yra visais atributais į jį įtraukti.  Kai aš papildomas brūkšnelius, Viskas dirbo puikiai.  Dan pamoka teko naudoti vieną sutrumpinimo, todėl aš nepadarė ryšys.

Tikiuosi, kad tai padės kam nors.

</pabaigos>

undefinedPrenumeruoti savo dienoraštį.

Sekite mane Twitter ne http://www.twitter.com/pagalvin

palik atsakymą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *