Månadsarkiv: Februari 2015

Felsökning tips för kantiga direktiven (Eller, Lära sig att älska bindestreck över igen)

Jag har ett par program att göra $http.get() samtal och jag ville kunna visa ett snyggt formaterat meddelande med fula fel Detaljer dolda, men tillgänglig.  I princip, Detta:

image

Och sedan om användaren klickar på fel, de ser mer information:

image

Enkla saker.  Eftersom exakt samma potentiella fel kan visas i den administrativa skärmen samt slutanvändaren skärmen, Det kallas klart till anpassade kantiga direktiv.  JAG  hittade den här enastående serie artiklar (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) av stort Dan Wahlin.  Efter hans råd, Jag har mycket snabbt skapat ett <Hello-world> direktiv och flyttade till min mer komplicerade fel display gummiskrapa. Jag sprang på lite problem med detta mer komplexa direktiv.  Glatt, typ av slump, Jag hade sagt WebStorm (redaktör jag använder dessa dagar) att filen JS var en kantig och det hjälpte mig räkna ut frågan.  Detta är koden för själva direktivet:

Angular.module("CDLApp").direktiv("generalCdlErrorHandler", funktionen() {

återvändande {
begränsa: "E",
Ersätt: sant,

omfattning: {
retrieveLastConfigurationError: "&"
},

mall:
'<div class = "alert alert-fara" roll = "varna" ng-init = "doShowExpandedErrorDetails = true" ng-show = "retrieveLastConfigurationError()">' +
"Det fanns en I/O fel eller andra fel. Detta händer oftast eftersom konfigurationsfilen data inte kunde " +
"hittade eller konfigurationsfilen innehåller felaktig information (som refererar till ett dokumentbibliotek " +
"det finns inte).' +
' <br />' +
' <div ng-show = "doShowExpandedErrorDetails">' +
' <en href = "#" ng-klicka = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Klicka här om du vill dölja detaljer." +
' </en>: ' +
' <br />' +
' <Pre>{{retrieveLastConfigurationError() | JSON}}</Pre>' +
' <br />' +
' </div>' +
' <div ng-show = "!doShowExpandedErrorDetails">' +
' <en href = "#" ng-klicka = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Klicka här för att expandera felinformation." +
' </en>' +
' </div>' +
'</div>'
};
});

I princip, Jag skapar ett nytt inslag som kallas en "generalCdlErrorHandler".  Den behöver åtkomst till en funktion som kallas retrieveLastConfigurationError och som hanteras i objektet räckvidd.  Jag kunde nog ha bara använt förälderns räckvidd, men det känns lata.  Om någon tycker att jag borde ha gjort det, Jag skulle älska att höra om det i kommentarerna.

Detta var allt bra, men jag var inte att få något.  Inga fel som dök upp i konsolen (minst en gång fast jag alla sx fel jag skapat på vägen).  Jag helt enkelt få inte några utdata från direktivet.  Jag gick och La lite statisk text innan direktivet ng-show och jag * gjorde * få som. Detta fick mig att tänka att direktivet kanske inte var tillåtet att implicit skapar nya vars som "doShowExpandedErrorDetails" eller en "ng-init" där. 

Jag gick tillbaka in i HTML att se om jag hade en typ och den här gången WebStorm hjälpte mig.  Jag hade förbi i funktionen retrieveLastConfigurationError som denna:

<General-cdl-fel-handler retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</General-cdl-fel-handler>

Men det behövs verkligen för att detta:

<General-cdl-fel-handler Hämta-sista-konfiguration-error = "CDLController.retrieveLastConfigurationError()">
</General-cdl-fel-handler>

WebStorm var smart nog att veta att det hade att avstavas.  Om det inte hade lämnat den antydan, Jag skulle förmodligen fortfarande felsökning av detta Leende.  Kul gånger!

Tricket är detta: inte bara avstavats direktiv elementnamnet, så är alla attribut som lägger du till.  När jag lagt bindestreck, allt fungerade bra.  Dan's tutorial råkade använda korta enda namn, så jag gjorde inte anslutningen.

Hoppas detta hjälper någon.

</slutet>

undefinedPrenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin

IE9 Verkligen inte gillar det när du tar en genväg med din <Spänn> Märken

Jag har hamnat i en dålig vana att använda Chrome hela tiden.  Det är "dåliga" eftersom de grejer jag utveckla verkligen måste köras på en massa andra webbläsare, inklusive, Tyvärr IE8.  Min arbete laptop har IE9 standard oavsett orsak) och jag gjorde bara en snabb check till se vad saker såg ut som och... det var inte vackra.  Till exempel:

image

Har * tänkt * se ut så här:

image

 

Var det inte bara av, men min klicka händelser var inte bränning.  (De flesta av dem, Hur som helst).

Visuellt, det såg ut som saker började gå ur nära länken "Avancerad installation".  Jag grävde i den del av HTML och fann att jag hade denna linje:

<span class = "glyphicon glyphicon-ny-fönster" />

Det verkar vara tillåtna syntax ("Chrome version 40.02214.94 m"är bra med det.). Jag gick och ändrade det ändå, som visas:

<span class = "glyphicon glyphicon-ny-fönster"></Spänn>

Som fixade det.

Sådan en liten liten sak orsakade sådan stor oreda på en skärm.  Kul gånger.

Det råkade vara en quick fix, men det är också sånt som bara får din ryggrad feljusterade när man ser den.  Det finns över 500 rader av HTML i denna lilla admin funktion och du vill bara inte hitta dig själv gräva bland dessa ogräs, någonsin Leende.

</slutet>

undefinedPrenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin