Ho un paio di applicazioni che fanno $http.get() chiamate e volevo essere in grado di mostrare un messaggio di errore ben formattato con brutto errore dettagli nascosti, ma accessibile.  Fondamentalmente, Questo:

E poi se l'utente fa clic sull'errore, vedono più informazioni:

Roba semplice.  Poiché l'esatto errore potenziale stesso può apparire in schermo amministrativo così come lo schermo dell'utente finale, e chiaramente chiamata direttiva angolari personalizzati.  IO  trovato questo serie eccezionale di articoli (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) dal grande Dan Wahlin.  Seguendo il suo Consiglio, Ho creato molto rapidamente un <Ciao mondo> direttiva e si è trasferito al mio più complesso seccatoio di visualizzazione errore. Mi sono imbattuto in un po ' di problemi con questa direttiva più complessa.  Felicemente, sorta di caso, Avevo detto WebStorm (l'editor che uso in questi giorni) che il file JS era un file angolare e mi ha aiutato a capire il problema.  Questo è il codice per la direttiva stessa:

Angular.Module("CDLApp").direttiva("generalCdlErrorHandler", funzione() {

    ritorno {
        limitare: "E",
        sostituire: true,

        ambito di applicazione: {
            retrieveLastConfigurationError: "&"
        },

        modello:
          '<classe div = "alert di avviso di pericolo" ruolo = "alert" ng-init = "doShowExpandedErrorDetails = true" ng-Visualizza = "retrieveLastConfigurationError()">' +
          «C'era un errore dei / o o altro errore.  Questo di solito accade perché il file di dati di configurazione potrebbe non essere ' +
          ' trovato o il file di configurazione contiene informazioni inesatte (come riferimento a una libreria di documenti ' +
          ' che non esiste).' +
          '  <br />' +
          '  <div. ng-show = "doShowExpandedErrorDetails">' +
          '    <href = "#" ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Clicca qui per nascondere i dettagli». +
          '    </un>: ' +
          '    <br />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <br />' +
          '  </div>' +
          '  <div. ng-show = "!doShowExpandedErrorDetails">' +
          '    <href = "#" ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Clicca qui per espandere i dettagli di errore». +
          '    </un>' +
          '  </div>' +
          '</div>'
    };
});

Fondamentalmente, Sto creando un nuovo elemento chiamato un "generalCdlErrorHandler".  Deve accedere a una funzione chiamata retrieveLastConfigurationError e che viene gestito nell'oggetto ambito.  Probabilmente potrei avere appena utilizzato ambito del genitore, ma che si sente pigro.  Se qualcuno pensa che avrei dovuto fare che, Mi piacerebbe sapere nei commenti.

Questo era tutto bene, ma non stavo ottenendo nulla.  Senza errori spuntati nella console (almeno una volta ho risolto tutti gli errori di sx che ho creato lungo la strada).  Semplicemente non ha ottenuto alcun output dalla direttiva.  Sono andato e aggiunto qualche testo statico prima direttiva ng-spettacolo e io * fatto * che. Questo mi ha fatto pensare che forse la direttiva non era permesso implicitamente creare nuovo vars come "doShowExpandedErrorDetails" o hanno un "init-ng" in là. 

Sono tornato in HTML per vedere che se avessi un tipo e questa volta WebStorm mi ha aiutato.  Io ero stato passando nella funzione retrieveLastConfigurationError come questo:

<generale-cdl-errore-gestore retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</generale-cdl-errore-gestore>

Ma davvero doveva essere questo:

<generale-cdl-errore-gestore recupera-ultimo--errore di configurazione = "CDLController.retrieveLastConfigurationError()">
</generale-cdl-errore-gestore>

WebStorm è stato abbastanza intelligente da sapere che doveva essere sillabate.  Se esso non avesse fornito quel pizzico, Sarebbe probabilmente essere ancora risoluzione dei problemi di questo .  Divertente volte!

Il trucco è questo: non solo è il nome di elemento direttiva sillabato, così sono gli attributi che si aggiunge ad esso.  Una volta aggiunto i trattini, tutto ha funzionato benissimo.  Tutorial di Dan è capitato di usare nomi brevi singoli, quindi non fare il collegamento.

Spero che questo aiuti qualcuno.

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Questo blog post descrive come si può avere multiplo Angular.js basato su web part di SharePoint (viene fatto riferimento tramite una web part editor contenuto) sulla stessa pagina. Sto chiamando una web part editor contenuto (CEWP) che fa riferimento JavaScript costruito utilizzando il framework di Angular.js un "Web parte angolare."

Processo di bootstrap di angolare è super facile e quasi ogni esempio trovate su internets va qualcosa come questo:

<ng-app HTML = 'myApp'>

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

</html>

Questo si rompe, Tuttavia, Se si desidera abilitare più CEWP che rappresenta più angolare web part nella stessa pagina. Angolare sarà solo automaticamente inizializzarlo contro la prima direttiva ng-app reperti – almeno a partire dalla versione angolare 1.3.6. La soluzione è abbastanza semplice – manualmente il codice di bootstrap invece. Sopra ora cambia in qualcosa di simile:

<corpo>
<doppieidentificazione IV =”bootstrapHere” ng-controllore =”myController come controllante”>
<bla /><bla /><bla />
</div>
</corpo>

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

<script di>
Angular.bootstrap(Angular.Element(Document. getElementById(“bootstrapHere”)),['myApp']);
</script di>

Fondamentalmente, ng-app sull'elemento per anziché fare il bootstrap, uno schiaffo un ID su quell'elemento. Poi, utilizzare il bootstrap() Metodo su angolare stessa per controllare l'avvio automatico di processo in fase di esecuzione. Ho provato questo con tre parti di web angolare diverso sulla stessa pagina e funziona un fascino.

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin