Comment puis-je mettre à jour dynamiquement la page-js tutoriel-php.cn

Comment puis-je mettre à jour dynamiquement la page

Barbara Streisand

Libérer： 2024-11-03 05:16:03

original

756 Les gens l'ont consulté

How Can I Dynamically Update Page

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>

Copier après la connexion

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 &amp;mdash; ' + title">myApp</title>
...
<body>
<h1 ng-bind="title"></h1></code>

Copier après la connexion

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!