javascript - solo - como poner un encabezado diferente en cada pagina en word
¿Cuál es la mejor manera de tener diferentes encabezados y pies de página en angularjs? (1)
Estoy usando la aplicación de una sola página angular js. Tengo encabezado y pie de página en común y mi ng-view cambia de acuerdo con el enrutamiento. Ahora necesito tener una página con diferente encabezado y pie de página. ¿Cómo puedo modificar la página actual para incluirla?
Tengo una página con ng-include = "shell.html" y shell.html tiene ng-include = "topnavigation.html" y ng-view = "about.html"
y mi ng-view apunta a diferentes plantillas basadas en el enrutamiento. Ejemplo: ng-view = "contact.html"
Puede hacerlo fácilmente manteniendo algo así como un contexto de página, que contiene las direcciones URL para plantillas adicionales (en su caso, el pie de página y el encabezado). Todo lo que necesita hacer es ajustar su página principal a algo como esto:
<body ng-app="myApp" ng-controller="MainCtrl">
<div ng-include="pageCtx.headerUrl"></div>
<div ng-view></div>
<div ng-include="pageCtx.footerUrl"></div>
</body>
Lo único que MainCtrl está haciendo aquí es exponer el pageCtx en $scope :
myApp.controller(''MainCtrl'', function($scope, myPageCtx) {
$scope.pageCtx = myPageCtx;
});
myPageCtx es un objeto de servicio que hace todo el trabajo "difícil":
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;
}
};
});
Ahora cualquier controlador asociado con, por ejemplo, una de sus plantillas incrustadas de ngView puede solicitar este servicio al igual que MainCtrl y modificar cualquiera de las configuraciones de contexto:
myApp.controller(''MyViewCtrl'', function($scope, myPageCtx) {
myPageCtx.title = ''Title set from view 1'';
myPageCtx.footerUrl = ''view1-footer.tmpl.html'';
});
Lo ves en acción en este plunker .