Teenindusandmeid otsa nurk direktiivide (Või, Õppida armastama sidekriipsud otsast jälle)

Mul on mõned apps et teha $http.get() kõned ja tahtsin võimalus näidata kenasti vormindatud tõrketeade peidetud kole tõrke üksikasjad, kuid kättesaadavad.  Põhimõtteliselt, See:

image

Ja siis kui kasutaja klikib viga, nad näevad rohkem infot:

image

Lihtne värk.  Kuna täpselt sama võimalikku viga saab kuvada ka haldus ekraani kui ka lõppkasutaja ekraani, selgelt nõudnud kohandatud nurk direktiivi.  MA  leidsin selle tasumata seeria artiklid (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) suur Dan Wahlin.  Pärast tema nõu, Ma väga kiiresti luua mõne <Hello-world> direktiiv ja kolis kellelegi mu keerulisem viga ekraan squeegee. I sattus natuke raske seda keerulisem direktiivile.  Õnnelikult, omamoodi juhus, Ma oleks öelnud WebStorm (Ma kasutan neid päevi toimetaja) JS faili tehti nurgeliste faili ja see aitas mul aru saada teema.  See on direktiivis tähist:

Angular.Module("CDLApp").direktiivi("generalCdlErrorHandler", funktsioon() {

edasi-tagasi {
piirata: "E",
Asenda: True,

reguleerimisala: {
retrieveLastConfigurationError: "&"
},

Mall:
'<div klassi = "alert alert-danger" roll = "Teavita" NG-init = "doShowExpandedErrorDetails = true" NG-show "retrieveLastConfigurationError =()">' +
"Ilmnes I/O tõrge või muu viga. See tavaliselt juhtub, sest konfiguratsiooni faili ei saanud " +
"leitud või konfiguratsioonifail sisaldab valeteavet (näiteks dokumenditeegi viitamine " +
"et pole olemas).' +
' <br />' +
' <div ng-Näita = "doShowExpandedErrorDetails">' +
' <href = "#" NG-vajuta = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'Üksikasjade peitmiseks klõpsake siin.' +
' </a>: ' +
' <br />' +
' <Pre>{{retrieveLastConfigurationError() | JSON}}</Pre>' +
' <br />' +
' </DIV>' +
' <div ng-Näita = "!doShowExpandedErrorDetails">' +
' <href = "#" NG-vajuta = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'Tõrke üksikasjad laiendamiseks klõpsake siin.' +
' </a>' +
' </DIV>' +
'</DIV>'
};
});

Põhimõtteliselt, Ma koostan uut elementi, mida nimetatakse "generalCdlErrorHandler".  See vajab juurdepääsu funktsiooni nimetatakse retrieveLastConfigurationError ja mida käsitletakse reguleerimisala objekti.  Ma ilmselt võiks just vanema ulatus, kuid mida tunneb laisk.  Kui keegi arvab, et ma oleks pidanud tegema, et, Oleks tore kuulda seda oma kommentaarides.

See oli kõik korras, Aga mul ei olnud midagi saada.  Nr vigu hüppasid üles konsool (vähemalt üks kord ma fikseeritud sx vead olen loonud mööda teed).  Ma lihtsalt ei saanud mingit väljundit direktiivi.  Ma läksin ja lisada mõned staatiline tekst enne direktiivi ng-show ja ma * ei * saada, et. See pani mind mõtlema, et ehk direktiivi ei tohtinud kaudselt luua uus vars nagu "doShowExpandedErrorDetails" või on "ng-init" seal. 

Ma läksin tagasi HTML näha, kui ma pidin tüüp ja seekord WebStorm aitas mind välja.  Ma möödaminnes sellist funktsiooni retrieveLastConfigurationError:

<Üldine cdl-Tõrkehaldur retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Üldine cdl-Tõrkehaldur>

Kuid seda tõesti vaja seda:

<Üldine cdl-Tõrkehaldur too-viimati-konfiguratsioon-error = "CDLController.retrieveLastConfigurationError()">
</Üldine cdl-Tõrkehaldur>

WebStorm oli piisavalt targad, et teavad, et see pidi olema sidekriipsuga.  Kui see ei olnud ette selle Vihje, Ma oleks ilmselt olema ikka tõrkeotsingu see naeratus.  Fun korda!

Trikk on see: mitte ainult on direktiiv elemendi nime sidekriipsuga, nii on teil lisada atribuute.  Kui lisasin kaks sidekriipsu, kõik töötas suur.  Dani juhendaja juhtus Kasuta ühtse, nii et ma ei teinud seoses.

Loodan, et see aitab keegi.

</lõpp>

undefinedTelli minu blogi.

Järgi mind vidistama kell http://www.twitter.com/pagalvin

Jäta vastus

Teie e-posti aadressi ei avaldata. Kohustuslikud väljad on tähistatud *