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

Denne blog indlæg beskriver, hvordan du kan have flere Angular.js baseret SharePoint-webdele (refereres til via en Indholdsredigering webdel) på samme side. Jeg kalder en Indholdsredigering webdel (CEWP) der henviser til JavaScript bygget ved hjælp af Angular.js rammer en "kantede webdel."

Kantedes bootstrap proces er super let og næsten alle eksempel du finde på internets går noget som dette:

<HTML-ng-app = "MitProgr">

<blah /><blah /><blah />

</HTML>

Dette nedbryder, dog, Hvis du vil aktivere flere CEWP repræsenterer flere kantede webdele på den samme side. Kantede vil kun automatisk systemgenerere mod det første direktiv om ng-app det fund – i det mindste fra kantede version 1.3.6. Løsningen er ret enkel – bootstrap manuelt din kode i stedet. Ovenstående nu ændres til noget som dette:

<kroppen>
<dIV id =”bootstrapHere” NG-controller =”myController som theController”>
<blah /><blah /><blah />
</div>
</kroppen>

<script src =”//Ajax.googleapis.com/Ajax/libs/angularjs/1.3.6/Angular.js”></script>

<script>
Angular.bootstrap(Angular.element(Document.getElementById(“bootstrapHere”)),["MitProgr"]);
</script>

Dybest set, istedet for benytter ng-app på element til at gøre din bootstrapping, du slap et ID på dette element. Derefter, bruge bootstrap() metoden på kantede sig selv til at styre de bootstrapping behandle i køre-tid. Jeg har testet dette med tre forskellige kantede webdele på den samme side og det virker en charme.

</slutningen>

Abonner på min blog.

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