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

Aquest bloc llocs descriu com es pot tenir múltiples Angular.js basat en elements web del SharePoint (fa referència a través d'un element web editor de continguts) a la mateixa pàgina. Vaig a trucar a un element web editor de continguts (CEWP) que fa referència a JavaScript construït utilitzant el marc Angular.js una "Part Angular Web."

Procés d'arrencada de angular és super fàcil i just sobre cada exemple que trobeu sobre la internets va alguna cosa com això:

<HTML ng-app = 'myApp'>

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

</HTML>

Això es trenca, No obstant això, Si voleu permetre que múltiples CEWP representar parts múltiples webs angular en la mateixa pàgina. Angular es automàticament només arrencar contra la primera Directiva ng-app es troba – com a mínim a partir de la versió angular 1.3.6. La solució és força simple-arrencar manualment el seu codi en canvi. L'anterior ara canvia a alguna cosa com això:

<cos>
<dIdentificador IV =”bootstrapHere” ng-controlador =”myController com theController”>
<bla /><bla /><bla />
</Div>
</cos>

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

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

Bàsicament, enlloc de fer servir ng-app en l'element per fer el seu encebant, vostè donar una bufetada a un ID a aquest element. Llavors, utilitzar l'arrencada() mètode en angular propi per controlar la encebant procés al temps d'execució. He provat això amb tres parts diferents web Angular en la mateixa pàgina i funciona un encant.

</final>

Subscriure's al meu blog.

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