Jeg har et par apps som gjør $http.get() samtaler og jeg ønsket å kunne vise en pent formatert feilmelding med stygge feildetaljer skjult, men tilgjengelig.  I utgangspunktet, Dette:

Og hvis du klikker feil, de ser mer informasjon:

Enkle ting.  Siden nøyaktig samme potensielle feil kan vises i skjermbildet administrative som sluttbrukeren skjermen, det tydelig kalt for en egendefinert kantete direktivet.  JEG  fant dette enestående serien artikler (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) av stort Dan Wahlin.  Etter hans råd, Jeg raskt opprettet en <Hei, verden> direktivet og gått videre min mer komplekse feil skjerm nal. Jeg løp inn litt problemer med mer komplekse direktivet.  Lykkelig, slags tilfeldigvis, Jeg hadde fortalt WebStorm (redaktøren jeg bruker disse dager) at JS filen var en kantete fil og det hjalp meg finne ut problemet.  Dette er koden for direktivet selv:

Angular.Module("CDLApp").direktivet("generalCdlErrorHandler", funksjonen() {

    avkastning {
        begrense: "E",
        Erstatt: sann,

        omfang: {
            retrieveLastConfigurationError: "&"
        },

        mal:
          '<div class = "varsle varsel-fare" rolle = "varsle" ng-init = "doShowExpandedErrorDetails = true" ng-show = "retrieveLastConfigurationError()">' +
          "Det var en jeg/o feil eller annen feil.  Dette skjer vanligvis fordi konfigurasjonsfilen data ikke kunne ' +
          "funnet eller konfigurasjonsfilen inneholder unøyaktig informasjon (som refererer til et dokumentbibliotek ' +
          "det finnes ikke).' +
          '  <br />' +
          '  <div ng-show = "doShowExpandedErrorDetails">' +
          '    <et href = "#" NG-klikk = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Klikk her for å skjule detaljer." +
          '    </en>: ' +
          '    <br />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <br />' +
          '  </div>' +
          '  <div ng-show = "!doShowExpandedErrorDetails">' +
          '    <et href = "#" NG-klikk = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Klikk her for å vise informasjon om feilen." +
          '    </en>' +
          '  </div>' +
          '</div>'
    };
});

I utgangspunktet, Jeg oppretter et nytt element kalt en "generalCdlErrorHandler".  Trenger en funksjon kalt retrieveLastConfigurationError og som håndteres i omfang-objektet.  Jeg kunne sannsynligvis ha bare brukt det overordnede området, men som føles lat.  Hvis noen tror burde jeg ha gjort det, Jeg ville elske å høre om det i kommentarfeltet.

Dette var alle fin, men jeg får ikke noe.  Ingen feil dukket opp i konsollen (minst én gang fast jeg alle sx feil jeg opprettet underveis).  Jeg bare fikk noen utdata fra direktivet.  Jeg gikk og lagt noen statisk tekst før direktivet ng-show og jeg * har * komme som. Dette gjorde meg til å tenke at kanskje direktivet ikke lov implisitt opprette nye vars som "doShowExpandedErrorDetails" eller har en "ng-init" der inne. 

Jeg gikk tilbake til HTML for å se hvis jeg hadde en type og denne gangen WebStorm hjalp meg ut.  Jeg hadde passert i funksjonen retrieveLastConfigurationError som dette:

<Generelt-cdl-feil-behandleren retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Generelt-cdl-feil-behandleren>

Men det virkelig nødvendig å være dette:

<Generelt-cdl-feil-behandleren hente-siste-konfigurasjon-error = "CDLController.retrieveLastConfigurationError()">
</Generelt-cdl-feil-behandleren>

WebStorm var smart nok å vite at det måtte være bindestrek.  Hvis det ikke hadde gitt det hintet, Jeg ville trolig være fortsatt feilsøking dette .  Moro ganger!

Trikset er dette: ikke bare er direktiv elementnavnet bindestrek, så er alle attributter du legge til.  Når jeg lagt bindestreker, alt fungerte bra.  Dan tutorial kom til å bruke korte enkelt navn, så jeg ikke gjorde tilkoblingen.

Håpe dette hjelper noen.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Denne bloggen innlegg beskriver hvordan du kan ha flere Angular.js basert SharePoint-webdeler (referert via en webdel for innholdsredigering) på samme side. Jeg kaller en webdel for innholdsredigering (CEWP) som refererer til JavaScript bygget med Angular.js rammen en "kantete-webdel."

Angular's bootstrap prosessen er superenkelt og omtrent alle eksempel du finner på internets går noe slikt:

<HTML ng-app = 'myApp'>

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

</HTML>

Dette bryter ned, men, Hvis du vil aktivere flere CEWP som representerer flere kantete webdeler på samme side. Angular vil automatisk bootstrap mot direktivet for første ng-app det finner – minst i kantete versjon 1.3.6. Løsningen er ganske enkel-bootstrap manuelt koden i stedet. Ovennevnte nå endres til noe som dette:

<kroppen>
<dIV id =”bootstrapHere” ng-kontrolleren =”myController som theController”>
<blah /><blah /><blah />
</div>
</kroppen>

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

<skriptet>
Angular.bootstrap(Angular.element(document.getElementById(“bootstrapHere”)),['myApp']);
</skriptet>

I utgangspunktet, istedet for benytter ng-app på elementet for å gjøre din bootstrapping, du klapse en ID på dette elementet. Deretter, Bruk inn bootstrap() metoden på kantete selv kontrollere bootstrapping behandle under kjøring. Jeg har testet dette med tre forskjellige kantete webdeler på samme side og det fungerer en sjarm.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin