J'ai quelques applications que $http.get faire() appels et je voulais être en mesure d'afficher un message d'erreur bien formaté avec erreur laid détails cachés, mais accessible.  Essentiellement, ce:

Et puis si l'utilisateur clique sur l'erreur, ils voient plus d'informations:

Trucs simples.  Étant donné que l'erreur potentielle même exacte peut apparaître dans l'écran d'administration ainsi que l'écran de l'utilisateur final, Il prévoyait clairement une directive custom angulaire.  JE  trouvé ceci meilleure série des articles (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) par le grand Dan Wahlin.  Suite à ses conseils, Très vite, j'ai créé un <Bonjour tout le monde> la directive et a déménagé sur mon racloir d'affichage erreur plus complexe. Je suis tombé sur un peu de mal avec cette directive plus complexe.  Heureusement, quelque sorte par hasard, J'avais dit WebStorm (l'éditeur que j'utilise ces jours-ci) que le fichier JS est un fichier angulaire et il m'a aidé à comprendre la question.  C'est le code pour la directive elle-même:

Angular.module(« CDLApp »).directive(« generalCdlErrorHandler », fonction() {

    retour {
        restreindre: « E »,
        remplacer: True,

        champ d'application: {
            retrieveLastConfigurationError: "&"
        },

        modèle:
          '<div class = "message d'alerte alerte-danger" rôle = "message d'alerte" ng-init = "doShowExpandedErrorDetails = true" ng-show = "retrieveLastConfigurationError()">' +
          "Il y avait une erreur d'e/s ou autre erreur.  Cela se produit généralement parce que le fichier de données de configuration ne pourrait pas être " +
          ' trouvé ou le fichier de configuration contient des informations inexactes (comme faisant référence à une bibliothèque de documents ' +
          "qui n'existe pas).' +
          '  <br />' +
          '  <div ng-show = « doShowExpandedErrorDetails »>' +
          '    <a href = "#" ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          « Cliquez ici pour masquer les détails ». +
          '    </un>: ' +
          '    <br />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <br />' +
          '  </Div>' +
          '  <div ng-show = "!doShowExpandedErrorDetails">' +
          '    <a href = "#" ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          « Cliquez ici pour agrandir les détails de l'erreur. » +
          '    </un>' +
          '  </Div>' +
          '</Div>'
    };
});

Essentiellement, Je crée un nouvel élément appelé un « generalCdlErrorHandler ».  Il a besoin d'accéder à une fonction nommée retrieveLastConfigurationError et qui est géré par l'objet de portée.  J'ai probablement aurais pu juste utiliser le champ d'application du parent, mais cela se sent paresseux.  Si quelqu'un pense que j'aurais dû faire, J'aimerais en entendre parler dans les commentaires.

C'était tout beau, mais je n'obtenais pas n'importe quoi.  Pas sautés vers le haut dans la console d'erreurs (au moins une fois, j'ai corrigé toutes les erreurs de sx, que j'ai créé le long du chemin).  Je n'ai simplement pas n'importe quelle sortie de la directive.  Je suis allé et ajouté du texte statique avant la directive ng-show et je * fait * qui se. Cela me fait penser que, peut-être, la directive n'était pas autorisée implicitement créer nouveau vars comme « doShowExpandedErrorDetails » ou ont un « ng-init » là-dedans. 

Je suis retourné dans le HTML pour voir que si j'avais un type et cette fois WebStorm m'a aidé.  J'avais été en passant à la fonction retrieveLastConfigurationError comme ça:

<général-cdl-gestionnaire d'erreurs retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</général-cdl-gestionnaire d'erreurs>

Mais il faut vraiment que ce soit:

<général-cdl-gestionnaire d'erreurs récupérer-dernier-configuration-erreur = "CDLController.retrieveLastConfigurationError()">
</général-cdl-gestionnaire d'erreurs>

WebStorm a été assez intelligent pour savoir qu'elle devait être un trait d'Union.  S'il n'avait pas fourni ce soupçon, Je serait probablement être encore dépannage cela .  Amusants fois!

L'astuce est la suivante: non seulement le nom de l'élément de directive est trait d'Union, sont donc des attributs que vous lui ajoutez.  Une fois que j'ai ajouté les traits d'Union, Tout fonctionnait très bien.  Tutoriel de Dan est arrivé d'utiliser des noms courts unique, donc je n'ai pas la connexion.

Espérons que cela aide quelqu'un.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin