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