Tengo un par de aplicaciones hacen $http.get() llamadas y yo quería ser capaz de mostrar un mensaje de error muy bien formateado con error feo detalles ocultos, pero accesible.  Básicamente, Esto:

Y entonces si el usuario hace clic en el error, Ven más info:

Cosa simple.  Desde el exacto mismo potencial error puede aparecer en la pantalla administrativa así como la pantalla del usuario final, claramente pidió una directiva personalizada Angular.  ME  Encontré esto excelente serie de los artículos (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) por la gran Dan Wahlin.  Siguiendo su Consejo, He creado muy rápidamente una <Hola mundo> la Directiva y se trasladó a mi más complejo escurridor pantalla de error. Me topé con un poco de problemas con esta directiva más compleja.  Felizmente, una especie de casualidad, Le había dicho informaticas (el editor de que usar estos días) que el archivo JS era un archivo Angular y me ayudó a resolver el problema.  Este es el código de la propia Directiva:

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

    retorno {
        restringir: "E",
        reemplazar: verdadero,

        ámbito de aplicación: {
            retrieveLastConfigurationError: "&"
        },

        plantilla:
          '<div class = "alerta alerta-peligro" papel = "alerta" NG-init = "doShowExpandedErrorDetails = true" ng-Mostrar = "retrieveLastConfigurationError()">' +
          "Hubo un error de E/S u otro error.  Esto suele suceder porque no podía ser el archivo de configuración de datos ' +
          ' se encuentra o el archivo de configuración contiene información inexacta (como referencia a una biblioteca de documentos ' +
          "eso no existe).' +
          '  <BR />' +
          '  <ng-Mostrar div = "doShowExpandedErrorDetails">' +
          '    <a href = "#" ng-clic = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Haga clic aquí para ocultar los detalles.» +
          '    </un>: ' +
          '    <BR />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <BR />' +
          '  </div>' +
          '  <ng-Mostrar div = "!doShowExpandedErrorDetails">' +
          '    <a href = "#" ng-clic = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Haga clic aquí para ampliar detalles del error». +
          '    </un>' +
          '  </div>' +
          '</div>'
    };
});

Básicamente, Estoy creando un nuevo elemento llamado un "generalCdlErrorHandler".  Necesita acceso a una función llamada retrieveLastConfigurationError y que se maneja en el objeto del ámbito de aplicación.  Probablemente podría haber sólo usado alcance de los padres, Pero se siente perezoso.  Si alguien piensa que debería haber hecho eso, Me encantaría escucharlo en los comentarios.

Esto fue bien, Pero no sentía nada.  No hay errores en la consola (al menos una vez he arreglado todos los errores de sx que creé en el camino).  Simplemente no tengo ninguna salida de la Directiva.  Fui y añadido algún texto estático antes de la Directiva ng-show y yo * hizo * eso. Esto me hizo pensar que tal vez la Directiva no estaba permitida implícitamente crear nuevos vars como "doShowExpandedErrorDetails" o una "ng-init" en allí. 

Volví en el HTML para ver si tenía un tipo y esta vez informaticas me ayudó a salir.  Había estado haciendo pasar en la función retrieveLastConfigurationError como esta:

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

Pero realmente necesitaba ser esto:

<General-cdl-error-controlador de recuperar-último-configuración-error = "CDLController.retrieveLastConfigurationError()">
</General-cdl-error-controlador>

Informaticas era lo suficientemente inteligente como para saber que debía integrarse.  Si hubiese dado esa pista, Yo podría probablemente ser todavía problemas esto .  Divertido veces!

El truco es este: No sólo es el nombre del elemento de directiva con un guión, Así que son atributos que agrega a él.  Una vez que he añadido los guiones, todo funcionó muy bien.  Tutorial de dan pasó a utilizar nombres cortos solos, Así que yo no hice la conexión.

Espero que esto ayude a alguien.

</final>

Suscribirse a mi blog.

Sígueme en Twitter en http://www.twitter.com/pagalvin

Este blog posts describe cómo puedes tener múltiples Angular.js basado en elementos web de SharePoint (hace referencia a través de un elemento web editor de contenido) en la misma página. Yo estoy llamando a un elemento web editor de contenido (CEWP) que hace referencia JavaScript construido utilizando el framework de Angular.js un "elemento Web Angular".

Proceso de arranque de angular es súper fácil y cada ejemplo que encontrará el internets es algo como esto:

<HTML ng-app = 'myApp'>

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

</HTML>

Esto se rompe, Sin embargo, Si desea habilitar múltiples CEWP que representa a varias partes de la web angular en la misma página. Angular se solamente automáticamente arranque contra la primera Directiva de ng-app se encuentra – por lo menos desde la versión angular 1.3.6. La solución es bastante simple – arranque manualmente el código en su lugar. Lo anterior ahora cambia a algo como esto:

<cuerpo>
<didentificación IV =”bootstrapHere” ng-controlador =”myController como theController”>
<bla /><bla /><bla />
</div>
</cuerpo>

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

<secuencia de comandos>
angular.bootstrap(angular.Element(Document.getElementById(“bootstrapHere”)),['myApp']);
</secuencia de comandos>

Básicamente, en lugar de utilizar ng-app sobre el elemento para hacer tu bootstrapping, que bofetada un ID a dicho elemento. A continuación, Utilice el bootstrap() método angular para controlar el arranque del proceso en tiempo de ejecución. He probado esto con tres partes web Angular diferente en la misma página y funciona de maravilla.

</final>

Suscribirse a mi blog.

Sígueme en Twitter en http://www.twitter.com/pagalvin