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>
Sígueme en Twitter en http://www.twitter.com/pagalvin
.