Modifier dynamiquement les en-têtes dans les vues partielles AngularJS
Dans AngularJS, la gestion des en-têtes et des titres de page dans différentes vues partielles peut présenter un défi. Pour résoudre ce problème, diverses approches ont été explorées, notamment l'exploitation des contrôleurs de vue et des services partagés. Cependant, une solution plus simple et plus efficace a émergé pour les scénarios impliquant le routage.
Solution utilisant le routage
Le code fourni montre comment mettre à jour de manière transparente le titre de votre page et l'en-tête h1. lors du changement entre les vues partielles AngularJS :
<code class="javascript">var myApp = angular.module('myApp', ['ngResource']); myApp.config( ['$routeProvider', function($routeProvider) { $routeProvider.when('/', { title: 'Home', templateUrl: '/Assets/Views/Home.html', controller: 'HomeController' }); $routeProvider.when('/Product/:id', { title: 'Product', templateUrl: '/Assets/Views/Product.html', controller: 'ProductController' }); }]); myApp.run(['$rootScope', function($rootScope) { $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { $rootScope.title = current.$$route.title; }); }]);</code>
Cette solution utilise l'événement $routeChangeSuccess, qui se déclenche chaque fois qu'un résultat réussi un changement d’itinéraire se produit. Dans cet écouteur d'événement, vous pouvez récupérer le titre de la configuration actuelle de la route et l'attribuer à la propriété $rootScope.title.
HTML :
Dans votre HTML, vous pouvez ensuite lier le titre de la page et l'en-tête h1 à la propriété $rootScope.title :
<code class="html"><head> <title ng-bind="'myApp &mdash; ' + title">myApp</title> ... <body> <h1 ng-bind="title"></h1></code>
En tirant parti de attribut ng-bind, le titre de la page et l'en-tête h1 seront automatiquement mis à jour lorsque l'itinéraire change. Cette solution offre un moyen propre et efficace de gérer dynamiquement vos informations d'en-tête en fonction de la vue partielle actuelle.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!