AngularJS - Poignée de fragments répétés comme en-Tête et Pied de page

J'ai essayé de mettre en œuvre l'en-tête /pied de page dans un Angular JS App. Je pensais à de l'ajout de ces ng-à inclure dans les principaux index.html. Cependant, cela aurait fonctionné si l'en-tête et pied de page sont des pages statiques. Mon cas est un peu différent... Dans la page de Login sans en-tête /pied de page est indiqué. Autres pages en fonction de si vous êtes connecté ou non, vous devez afficher "Bienvenue utilisateur [ déconnexion]" ou "Bienvenue invité sur [ connexion ]".

Je enregistrer les informations de connexion dans la rootScope ainsi que de définir une valeur de type boolean $rootScope.isLoggedIn sur connexion. Le plus gros problème semble être que l'ensemble de la ng-inclure n'est pas actualisé sur une fermeture de session. Donc divs avec ng-afficher, de masquer les directives ne seront pas masquer/afficher sur le changement. Quelqu'un a suggéré d'utiliser ng-commutateur - il également se comporte de la même manière.

Si je déplace le code d'en-tête à l'intérieur de différents points de vue, alors tout est bien.

Une question similaire est ici: Actualisation de la page d'en-tête dans angularjs

Cela dépend de quelles expressions sont utilisées pour modifier\masquer les divs, êtes-vous en regardant sur certaines propriétés etc. Fournir certains modèle de code pour l'en-tête et de leur expression de liaison.
Pourriez-vous utiliser ng-controller directive à donner les en-têtes/pieds de page d'un contrôleur d'accès à votre $rootScope et ajouter un peu de masquer/afficher la logique?
BTW, mettre des trucs sur $rootScope est équivalent à globals dans la "plaine" de javascript et pas une très bonne pratique, je vous recommande d'utiliser un service de stockage de vos "isLoggedIn".
thx. J'ai commencé l'application et j'ai déjà un LoginService... je devrais le renommer en UserService et devrait l'avoir.

OriginalL'auteur Hari Gangadharan | 2013-10-10

  1. 7

    Utiliser un contrôleur dans l'en-tête/pied de page, comme ivarni suggéré. Un exemple à partir d'un (expérimental) application de mon propre:

    Dans le index.html, l'en-tête affiche généré dynamiquement, un menu connexion/déconnexion etc:

    <div id="navbar" class="navbar navbar-inverse navbar-fixed-top"
    x-ng-controller="NavbarCtrl" x-ng-include="'app/main/navbar.html'"></div>

    La NavbarCtrl construit le champ d'application approprié pour la app/main/navbar.html modèle. Le modèle se présente comme suit (en tenant compte de vos besoins et de détails inutiles supprimés):

    <div class="navbar-inner" x-ng-if="showHeader">
    <div class="container">
        <div>
            <ul class="nav">
                <li x-ng-repeat="menuEntry in menuEntries">
                    <a x-ng-href="#{{menuEntry.path}}">{{menuEntry.display}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div x-ng-if="userData.loggedIn">
        Wellcome {{userData.userName}}!
        <a x-ng-click="logout()">Logout</a>
    </div>
    <div x-ng-if="!userData.loggedIn">
        <a x-ng-click="login()">Login</a>
    </div>
</div>

    De sorte que la totalité de la majoration est caché en fonction de la showHeader portée variable. Il crée le menu dynamiquement (menuEntries). Et selon userData.loggedIn, la Connexion/Déconnexion message.

    Merci. Je ne sais pas ce qui s'est passé. J'ai codé quasiment identiques, mais ne fonctionne pas... finalement abandonné. Puis revint et refait - tout va bien!
    Encore une fois il ne fonctionne pas après le déplacement de isLoggedIn de rootScope!!! Question mise à jour...
    Pourriez-vous reproduire le problème dans un Violon? C'est la seule façon de l'aider.
    J'ai remarqué que vous avez des préfixes de " x " sur votre angulaire attributs. Pourquoi avez-vous x-ng-controller et x-ng-repeat au lieu de ng-controller et ng-repeat? Est-il un préfixe personnalisé? Est-il avantageux? Merci
    Strictement (strictement) parlant, ces attributs ne sont pas valides selon la DTD HTML. E. g. Eclipse affiche des avertissements à ceux-ci. Cependant la DTD précise que tout attribut avec le préfixe x- ou data- est légal. Ainsi écrit x-ng-if au lieu de ng-if vous permet d'économiser quelques mises en garde sur certains outils. J'utilise rarement cette pratique plus (à partir de 2015 - cette réponse est de 2013).

    OriginalL'auteur Nikos Paraskevopoulos