Javascript Girl
  1. Javascript Girl
  3. Quelle est la meilleure façon d'avoir différents en-têtes et pieds de page dans angularjs?
Intereting Posts
Phantomjs pour racler la fonction de la page Web ne fonctionne pas Ouvrez plusieurs liens dynamiques avec le même appel ajax Comment puis-je imprimer une image dans une page Web, en ajustant le format de papier (A3, A4, A5, etc.)? Pourquoi augmenter les connexions de travail dans Nginx rend l'application plus lente dans node.js cluster? Variable locale d'accès JavaScript avec le même nom dans le champ intérieur et extérieur Passer des données d'une page Web à une autre Référence d'un composant binaire à js-ctypes Comment obtenir l'option ID sélectionnée avec Javascript, pas JQuery Fichier Dajaxice javascript core ne pas être analysé Défilement continu sur le vol stationnaire Comment afficher le message de validation ci-dessous chaque zone de texte en utilisant jquery? Comment vérifier si un utilisateur aime ma page Facebook ou URL à l'aide de l'API de Facebook Obtenir le nom d'un modèle / classe de l'exemple d'un modèle Backbone Model Impossible d'utiliser le gestionnaire d'événements de clic de jquery pour détecter le clic droit Permettre à l'utilisateur de déplacer la position du marqueur vers l'arrière (index z?) Dans la carte personnalisée Google Map

Quelle est la meilleure façon d'avoir différents en-têtes et pieds de page dans angularjs?

J'utilise l'application angular js one page. J'ai l'en-tête et le pied de page en commun et mon ng-view change selon le routage. Maintenant, je dois avoir une page avec différents en-têtes et pieds de page. Comment puis-je modifier la page actuelle pour l'inclure.

J'ai une page avec ng-include = "shell.html" et shell.html a ng-include = "topnavigation.html" et ng-view = "about.html"

Et mon ng-view pointe vers différents modèles en fonction du routage. Ex: ng-view = "contact.html"

Vous pouvez le faire facilement en conservant quelque chose comme un contexte de page, qui contient les URL pour les modèles supplémentaires (dans votre cas, le pied de page et l'en-tête). Tout ce que vous devez faire est d'envelopper votre page principale à quelque chose comme ceci: 

<body ng-app="myApp" ng-controller="MainCtrl"> <div ng-include="pageCtx.headerUrl"></div> <div ng-view></div> <div ng-include="pageCtx.footerUrl"></div> </body>

La seule chose que le MainCtrl fait ici expose la pageCtx sur la $scope : 

 myApp.controller('MainCtrl', function($scope, myPageCtx) { $scope.pageCtx = myPageCtx; });

myPageCtx est un objet de service qui effectue tous les travaux «difficiles»: 

 myApp.provider('myPageCtx', function() { var defaultCtx = { title: 'Default Title', headerUrl: 'default-header.tmpl.html', footerUrl: 'default-footer.tmpl.html' }; var currentCtx = angular.copy(defaultCtx); return { $get: function($rootScope) { // We probably want to revert back to the default whenever // the location is changed. $rootScope.$on('$locationChangeStart', function() { angular.extend(currentCtx, defaultCtx); }); return currentCtx; } }; });

Maintenant, tout contrôleur associé à, par exemple, un de vos modèles ngView incorporés peut demander ce service tout comme le MainCtrl et modifier l'un des paramètres de contexte: 

 myApp.controller('MyViewCtrl', function($scope, myPageCtx) { myPageCtx.title = 'Title set from view 1'; myPageCtx.footerUrl = 'view1-footer.tmpl.html'; });

Vous le voyez en action dans ce plunker .