Ik heb een paar apps die make-$http.get() oproepen en ik wilde te kunnen laten zien een mooi opgemaakte foutmelding met lelijke foutdetails verborgen, maar toegankelijk.  In principe, Dit:

En dan als de gebruiker op de fout klikt, zij zien meer info:

Eenvoudige dingen.  Aangezien de exacte dezelfde potentiële fout kan worden weergegeven in het administratieve scherm evenals de eindgebruiker scherm, het duidelijk gevraagd om een aangepaste hoekige richtlijn.  IK  vond dit uitstekende serie van artikelen (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) door de grote Dan Wahlin.  Na zijn advies, Ik heb zeer snel gemaakt een <Hello-wereld> richtlijn en verhuisde naar mijn meer complexe fout display zuigrubbers schoon. Ik liep in een beetje moeite met deze meer complexe richtlijn.  Gelukkig, soort bij toeval, Ik had verteld WebStorm (de editor gebruik ik deze dagen) dat de JS-bestand een hoekige bestand was en het hielp me het probleem achterhalen.  Dit is de code voor de richtlijn zelf:

angular.module("CDLApp").richtlijn("generalCdlErrorHandler", functie() {

    terugkeer {
        beperken: "E",
        vervangen: True,

        toepassingsgebied: {
            retrieveLastConfigurationError: "&"
        },

        sjabloon:
          '<div class = "waarschuwen waarschuwing-gevaar" rol = "waarschuwen" ng-init = "doShowExpandedErrorDetails = true" ng-show "retrieveLastConfigurationError =()">' +
          ' Was er een I/O fout of andere fout.  Dit gebeurt meestal omdat gegevens configuratiebestand kon niet worden ' +
          ' gevonden of het configuratiebestand bevat onjuiste informatie (zoals verwijzen naar een documentbibliotheek ' +
          ' bestaat niet).' +
          '  <BR />' +
          '  <div ng-show = "doShowExpandedErrorDetails">' +
          '    <een href = "#" ng-Klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'Klik hier om te verbergen van details.' +
          '    </een>: ' +
          '    <BR />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <BR />' +
          '  </div>' +
          '  <div ng-show = "!doShowExpandedErrorDetails">' +
          '    <een href = "#" ng-Klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'Klik hier om uit te breiden foutdetails.' +
          '    </een>' +
          '  </div>' +
          '</div>'
    };
});

In principe, Ik ben het creëren van een nieuw element genaamd een "generalCdlErrorHandler".  Het moet toegang tot een functie genaamd retrieveLastConfigurationError en dat wordt behandeld in het toepassingsgebied-object.  Ik zou kunnen waarschijnlijk hebben net gebruikt de bovenliggende toepassingsgebied, maar dat voelt lui.  Als iemand denkt dat moet ik hebben gedaan die, Ik zou graag horen over het in de commentaren.

Dit was allemaal prima, maar ik was niet om het even wat.  Geen fouten popped opwaarts in de console (ten minste eenmaal vaste ik alle sx fouten die ik heb gemaakt langs de weg).  Ik gewoon krijgen niet geen uitvoer uit de richtlijn.  Ik ging en voegde enkele statische tekst voordat de richtlijn ng-show en ik * heeft * dat.. Dit deed me denken dat misschien de richtlijn was niet toegestaan om te impliciet maken nieuwe vars zoals "doShowExpandedErrorDetails" of een "ng-init" hebben daar. 

Ik ging terug naar de HTML-code om te zien dat als ik had een type en deze keer WebStorm hielp me uit.  Ik had al passeren in de retrieveLastConfigurationError functie als dit:

<algemeen-cdl-fout-handler retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</algemeen-cdl-fout-handler>

Maar het echt nodig om deze:

<algemeen-cdl-fout-handler ophalen-laatste-configuratie-error = "CDLController.retrieveLastConfigurationError()">
</algemeen-cdl-fout-handler>

WebStorm was slim genoeg om te weten dat het moest worden afgebroken.  Als dit argument niet had aangeboden dat hint, Ik zou waarschijnlijk worden nog steeds problemen met dit .  Leuke tijden!

De truc is dit: niet alleen is de richtlijn elementnaam afgebroken, zo zijn de kenmerken die u aan het toevoegen.  Zodra ik heb toegevoegd de afbreekstreepjes, alles werkte prima.  Dan de tutorial is er gebeurd met korte enkele namen gebruiken, dus ik heb niet de verbinding maken.

Hoop dat dit helpt iemand.

</einde>

Abonneren op mijn blog.

Volg mij op Twitter op http://www.twitter.com/pagalvin

Deze blog posten wordt beschreven hoe u meerdere kan hebben Angular.js op basis van SharePoint-webonderdelen (waarnaar wordt verwezen via een webonderdeel Inhoudseditor) op dezelfde pagina. Ik roep een webonderdeel Inhoudseditor (CEWP) waarin wordt verwezen naar JavaScript gebouwd met behulp van het Angular.js kader een 'hoekige webonderdeel.'

Hoekige de bootstrap proces is super eenvoudig en zowat elke voorbeeld u op de internets vindt gaat iets als dit:

<HTML-ng-app = 'Mijntoep'>

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

</HTML>

Dit breekt, echter, Als u wilt inschakelen meerdere CEWP die meerdere hoekige webonderdelen op dezelfde pagina. Hoekige zal alleen automatisch bootstrap tegen de eerste ng-app richtlijn het gezochte – ten minste vanaf hoekige versie 1.3.6. De oplossing is vrij eenvoudig-handmatig bootstrap uw code in plaats daarvan. Het bovenstaande nu verandert in iets als dit:

<lichaam>
<dIV id =”bootstrapHere” ng-controller =”myController als theController”>
<bla /><bla /><bla />
</div>
</lichaam>

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

<script>
angular.bootstrap(angular.element(document.getElementById(“bootstrapHere”)),['Mijntoep']);
</script>

In principe, in plaats van met behulp van ng-app op het element te doen uw bootstrappen, u klap een ID naar dat element. Vervolgens, Gebruik de bootstrap() methode op hoekige zelf om te controleren het bootstrappen verwerken op run-time. Ik heb dit met drie verschillende hoekige webonderdelen op dezelfde pagina getest en het werkt een charme.

</einde>

Abonneren op mijn blog.

Volg mij op Twitter op http://www.twitter.com/pagalvin