Jeg har et par apps at gøre $http.get() opkald og jeg ønskede at være i stand til at vise et pænt formateret fejlmeddelelse med oplysninger om grim fejl skjult, men tilgængelig.  Dybest set, Dette:

Og derefter hvis brugeren klikker på fejlen, de ser mere info:

Simple ting.  Da den nøjagtige samme potentielle fejl kan vises i skærmbilledet administrative samt skærmbilledet slutbrugeren, det klart kaldes for en brugerdefineret kantede direktiv.  JEG  fandt denne fremragende serie af artikler (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) af stort Dan Wahlin.  Efter hans råd, Jeg meget hurtigt skabt en <Hej-verden> direktiv og flyttede videre til mine mere komplekse fejl display sugefod. Jeg løb ind i en smule problemer med denne mere komplekse direktiv.  Lykkeligt, slags ved en tilfældighed, Jeg havde fortalt WebStorm (editor jeg bruge disse dage) at JS fil var en kantede fil og det hjalp mig med at finde ud af problemet.  Dette er koden for selve direktivet:

Angular.Module("CDLApp").direktiv("generalCdlErrorHandler", funktion() {

    tilbagevenden {
        begrænse: "E",
        Erstat: True,

        anvendelsesområde: {
            retrieveLastConfigurationError: "&"
        },

        skabelon:
          '<div class = "alarm alarm-fare" rolle = "indberetning" NG-init = "doShowExpandedErrorDetails = true" NG-Vis = "retrieveLastConfigurationError()">' +
          ' Der var en i/o fejl eller andre fejl.  Dette sker typisk fordi konfiguration datafil ikke kunne være ' +
          ' fundet eller konfigurationsfilen indeholder unøjagtige oplysninger (som refererer til et dokumentbibliotek ' +
          «der findes ikke).' +
          '  <BR />' +
          '  <div ng-Vis = "doShowExpandedErrorDetails">' +
          '    <en href = "#" NG-klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Klik her for at skjule detaljer.» +
          '    </en>: ' +
          '    <BR />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <BR />' +
          '  </div>' +
          '  <div ng-Vis = "!doShowExpandedErrorDetails">' +
          '    <en href = "#" NG-klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Klik her for at udvide fejldetaljer.» +
          '    </en>' +
          '  </div>' +
          '</div>'
    };
});

Dybest set, Jeg opretter et nyt element kaldet en "generalCdlErrorHandler".  Det skal have adgang til en funktion kaldet retrieveLastConfigurationError og som håndteres i objektet anvendelsesområde.  Jeg kunne sandsynligvis have bare brugt det overordnede omfang, men der føles doven.  Hvis nogen mener burde jeg have gjort det, Jeg ville elske at høre om det i kommentarerne.

Dette var alt fint, men jeg var ikke at få noget.  Ingen fejl dukkede op i konsollen (mindst en gang fast jeg alle sx fejl jeg skabt undervejs).  Jeg gjorde ikke blot få noget output fra direktivet.  Jeg gik og tilføjet nogle statisk tekst før direktivet ng-show og jeg * gjorde * få,. Dette gjorde mig til at tænke, at måske direktivet ikke var tilladt at implicit oprette nye vars som "doShowExpandedErrorDetails" eller har en "ng-init" derinde. 

Jeg gik tilbage i HTML til at se, hvis jeg havde en type, og denne gang WebStorm hjalp mig ud.  Jeg havde stillet i funktionen retrieveLastConfigurationError som denne:

<General-cdl-fejl-handleren retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</General-cdl-fejl-handleren>

Men det virkelig skulle være det:

<General-cdl-fejlbehandleren hente-sidste-konfiguration-fejl = "CDLController.retrieveLastConfigurationError()">
</General-cdl-fejl-handleren>

WebStorm var smart nok til at vide, at det skulle deles.  Hvis det ikke havde fastsat at vink, Jeg ville sandsynligvis stadig fejlfinding dette .  Sjov gange!

Tricket er dette: ikke kun er direktiv elementnavnet bindestreg, så er de attributter, du føjer til den.  Når jeg tilføjet bindestregerne, alt arbejdede stor.  Dan's tutorial kom til at bruge korte enkelt navne, så jeg ikke gjorde gøre forbindelsen.

Håb indeværende hjælper nogen.

</slutningen>

Abonner på min blog.

Følg mig på kvidre på http://www.twitter.com/pagalvin