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:

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

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 .  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>

Prenumerera på min blogg.

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

Denna blogg inlägg beskriver hur du kan ha flera Angular.js baserade SharePoint-webbdelar (refereras via en webbdelen Innehållsredigeraren) på samma sida. Jag ringer en webbdelen Innehållsredigeraren (CEWP) som refererar till JavaScript byggt med Angular.js ramen en "kantiga webbdel."

Vinkelformigs bootstrap processen är super lätt och bara om alla exempel du hittar på internets går ungefär så här:

<HTML-ng-app = "MittProgram">

<bla /><bla /><bla />

</HTML>

Detta bryter ner, men, Om du vill aktivera flera CEWP som representerar flera kantiga webbdelar på samma sida. Vinkelformig kommer bara automatiskt starta mot det första direktivet om ng-app det fynd – åtminstone från och med kantiga version 1.3.6. Lösningen är ganska enkel – starta manuellt din kod i stället. Ovanstående nu ändras till något sånt här:

<organ>
<dIV id =”bootstrapHere” ng-controller =”myController som theController”>
<bla /><bla /><bla />
</div>
</organ>

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

<skript>
Angular.bootstrap(Angular.element(document.getElementById(“bootstrapHere”)),["MittProgram"]);
</skript>

I princip, istället för att använda ng-app på elementet göra din bootstrapping, du slap ett ID på elementet. Sedan, använda bootstrap() metoden på kantiga själv styra den bootstrapping bearbeta vid körning. Jag har testat detta med tre olika kantiga webbdelar på samma sida och det fungerar en charm.

</slutet>

Prenumerera på min blogg.

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