Hibaelhárítási irányelvek szögletes tipp (Vagy, Learning To Love kötőjelet teljesen vége újra)

Nekem van egy pár, apps, hogy hogy $http.get() hívások, és akartam, hogy képes megmutatni a szépen formázott hibaüzenet jelenik meg a csúnya hiba részleteit rejtett, de elérhető.  Alapvetően, Ez:

image

Majd ha a felhasználó rákattint a hiba, látják, további információ:

image

Egyszerű megtöm.  Mivel a pontos ugyanaz lehetséges hiba jelenhet meg a közigazgatási képernyő, valamint a végfelhasználó számára képernyőn, Ez egyértelműen nevű egyéni szögletes irányelve.  I  Ezt találtam kiváló sorozat cikkek (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) a nagy Dan Wahlin.  A tanácsát követve, Nagyon gyorsan készítettem egy <Helló, világ> irányelv és az összetettebb hiba bemutatás rakli esélytelennek. Én spárgagombolyog-ba egy kis baj, összetettebb irányelvről.  Boldogan, valami véletlen, Azt mondta WebStorm (a szerkesztő használom ezekben a napokban) hogy a JS reszelő volt egy szögletes fájlt, és ez segített nekem kitalálni, hogy a kérdés.  Ez a kód az maga az irányelv:

angular.Module("CDLApp").irányelv("generalCdlErrorHandler", függvény() {

vissza {
korlátozása: "E",
csere: igaz,

hatókör: {
retrieveLastConfigurationError: "&"
},

sablon:
'<div class = "figyelmeztető riasztás-veszély" szerep = "figyelmeztetés" ng-init = "doShowExpandedErrorDetails = true" ng-show = "retrieveLastConfigurationError()">' +
"Volt egy I/O hiba vagy más hiba. Ez általában azért történik, mert a konfigurációs adatok reszelő nem tudott lenni " +
"található, vagy a konfigurációs fájl tartalmazza a pontatlan információk (mint viszonyítási dokumentumtárban " +
"nem létezik).' +
' <br />' +
' <div ng-show = "doShowExpandedErrorDetails">' +
' <a href = "#" ng-kattintson = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Kattintson ide, és elrejthetjük a részleteket." +
' </egy>: ' +
' <br />' +
' <előtti>{{retrieveLastConfigurationError() | JSON}}</előtti>' +
' <br />' +
' </Div>' +
' <div ng-show = "!doShowExpandedErrorDetails">' +
' <a href = "#" ng-kattintson = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Kattintson ide a hiba részletek kibontása." +
' </egy>' +
' </Div>' +
'</Div>'
};
});

Alapvetően, Én létre egy új elemet úgynevezett "generalCdlErrorHandler".  Szüksége van egy funkció úgynevezett retrieveLastConfigurationError való hozzáférés, és hogy kezeli az alkalmazási objektum.  Talán tudtam volna csak használni a szülőtartomány, de úgy érzi, hogy lusta.  Ha valaki azt hiszi, hogy kellett volna, Szeretnék hallani róla a hozzászólások.

Ez volt minden finom, de én nem kapok semmit.  Nincs hiba bukkant fel a konzol (legalább egyszer én rögzített a sx hibák az út mentén létrehozott).  Egyszerűen nem kapok semmilyen kimenetet az irányelv.  Ment, és hozzáadott néhány statikus szöveget, mielőtt az ng-Térkép-irányelv, és * tett *, hogy. Ez jutott eszembe, hogy talán az irányelv nem engedték, hogy implicit módon hozhat létre új vars, mint a "doShowExpandedErrorDetails" vagy "ng-init" van, ott. 

Mentem vissza, hogy, ha én típus, és ez alkalommal WebStorm segített én ki a HTML-be.  Volt nem halad, mint ez a retrieveLastConfigurationError függvényben:

<általános-centrálzár-hiba-kezelő retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</általános-centrálzár-hiba-kezelő>

De valóban szükség van, hogy ez a:

<általános-centrálzár-hibakezelő elhoz-utolsó-konfiguráció-hiba = "CDLController.retrieveLastConfigurationError()">
</általános-centrálzár-hiba-kezelő>

WebStorm volt elég okos, hogy tudja, hogy meg kellett Kötőjeles.  Ha ez nem biztosított, hogy tipp, Én lenne talán lehet még hibaelhárítás ez Mosoly.  Fun-szer!

A trükk az ezt: nem csak az irányelv elemnév elválasztását, tehát van olyan attribútumokat ad hozzá.  Egyszer ki a kötőjeleket, minden munkás nagy.  Dan bemutató történt-hoz használ rövid nevek, így nem csinál a kapcsolatot.

Remél ez segít valaki.

</vége>

undefinedSubscribe to my blog.

Kövesse nekem Twitter http://www.twitter.com/pagalvin

hagyj válaszüzenetet

Az e-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *