Tinc un parell d'apps que fan $http.get() trucades i jo volia ser capaç de mostrar un missatge d'error molt ben formatada amb lleig error detalls amagats, però accessible.  Bàsicament, això:

I llavors si l'usuari fa clic en l'error, veuen més informació:

Coses simples.  Ja que el mateix error potencial exacte poden aparèixer en la pantalla administrativa, així com la pantalla de l'usuari final, que diu clarament per una directiva Angular personalitzat.  JO  trobat això sèries destacades d'articles (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) pel gran Dan Wahlin.  Seguint el seu Consell, Molt ràpidament em creat un <Hola món> Directiva i es va traslladar a la meva squeegee de exhibició d'error més complex. Corria a una mica de problemes amb aquesta Directiva més complex.  Feliçment, per casualitat una mena de, Jo havia dit WebStorm (l'editor que faig servir aquests dies) que l'arxiu JS era un fitxer Angular i m'ajudava a esbrinar l'assumpte.  Aquest és el codi per a la mateixa Directiva:

angular.Module("CDLApp").Directiva("generalCdlErrorHandler", funció() {

    retorn {
        restringir: "E",
        substituir: True,

        àmbit d'aplicació: {
            retrieveLastConfigurationError: "&"
        },

        plantilla:
          '<div class = "avisa' alerta-perill" paper = "avisa" ng-init = "doShowExpandedErrorDetails = true" ng-demostració = "retrieveLastConfigurationError()">' +
          "Hi havia un error e/s o altre error.  Normalment això passa perquè el fitxer de dades de configuració no podria ser ' +
          "Hem trobat o el fitxer de configuració conté informació inexacta (com una biblioteca de documents de referència " +
          "que no existeix).' +
          '  <br />' +
          '  <div ng-demostració = "doShowExpandedErrorDetails">' +
          '    <un href = "#" clic ng = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Feu clic aquí per amagar detalls." +
          '    </un>: ' +
          '    <br />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <br />' +
          '  </Div>' +
          '  <div ng-demostració = "!doShowExpandedErrorDetails">' +
          '    <un href = "#" clic ng = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Feu clic aquí per ampliar detalls d'error." +
          '    </un>' +
          '  </Div>' +
          '</Div>'
    };
});

Bàsicament, Estic creant un nou element anomenat una "generalCdlErrorHandler".  Necessita accés a una funció anomenada retrieveLastConfigurationError i que és tractada amb l'objecte d'abast.  Probablement podria tenir només utilitzava l'abast del pare, però que se sent mandrós.  Si algú pensa que hauria d'haver fet que, M'encantaria escoltar-lo en els comentaris.

Això estava tot bé, però jo no estava tenint res.  Apareixia a la consola d'errors (a mínim un cop em fixo tots els sx errors que he creat en el camí).  Simplement no aconseguia cap eixida des de la Directiva.  I se n'anava i afegia algun text estàtic abans la Directiva ng-demostració i jo * feia * aconseguir que. Això em va fer pensar que potser la Directiva no estava permès implícitament crear vars noves com "doShowExpandedErrorDetails" o tenir un "ng-init" allà. 

Tornava a l'HTML per veure que si hi hagués un tipus i aquesta vegada WebStorm m'ajudava.  Jo havia estat passant en la funció retrieveLastConfigurationError com aquest:

<general-cdl-error-controlador retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</general-cdl-error-controlador>

Però el realment es necessita per ser això:

<general-cdl-error-controlador recuperar últim-configuració-error = "CDLController.retrieveLastConfigurationError()">
</general-cdl-error-controlador>

WebStorm era prou intel ligent com saber que havia de ser hyphenated.  Si no hagués proporcionava aquell toc, Em vols probablement ser encara depuració això .  Temps de diversió!

El truc és això: no només és el nom de Directiva element hyphenated, així són cap atribut que afegir-hi.  Una vegada que afegia els guions, tot treballat gran.  Tutorial de Dan va passar a utilitzar noms individuals pocs, Així que jo no vaig fer la connexió.

Espero que això ajudi a algú.

</final>

Subscriure's al meu blog.

Follow me on Twitter http://www.twitter.com/pagalvin