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

Ce blog postes décrit comment vous pouvez avoir plusieurs composants WebPart SharePoint de base de Angular.js (référencés via un composant WebPart éditeur de contenu) sur la même page. J'appelle un composant WebPart éditeur de contenu (CEWP) qui référence JavaScript construit en utilisant le framework Angular.js « Partie Web angulaire ».

Processus de démarrage du moment angulaire est super facile et à peu près tous les exemples que vous trouverez sur les internets va quelque chose comme ça:

<html ng-app = « myApp »>

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

</html>

Cela tombe en panne, Cependant, Si vous souhaitez activer multiples CEWP représentant plusieurs composants WebPart angulaire sur la même page. Angulaire sera automatiquement l'amorcer contre la première directive de ng-app découvertes – au moins depuis la version angulaire 1.3.6. La solution est assez simple : manuellement amorcer votre code à la place. Ce qui précède maintenant remplace par quelque chose comme ça:

<corps>
<did IV =”bootstrapHere” ng-contrôleur =”myController comme theController”>
<bla /><bla /><bla />
</Div>
</corps>

<script src =”//Ajax.googleapis.com/ajax/libs/angularjs/1.3.6/Angular.js”></script>

<script>
Angular.bootstrap(Angular.Element(document.getElementById(“bootstrapHere”)),[« myApp »]);
</script>

Essentiellement, au lieu de ng-app sur l'élément pour faire votre amorçage, vous gifler un ID sur cet élément. Puis, utiliser des données d'amorçage() méthode sur angulaire lui-même pour contrôler l'amorçage du processus en cours d'exécution. J'ai testé avec trois WebPart angulaires différentes sur la même page et ça marche un charme.

</fin>

S'abonner à mon blog.

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