AngularJS 部分ビューでヘッダーを動的に管理するにはどうすればよいですか?-jsチュートリアル-php.cn

AngularJS 部分ビューでヘッダーを動的に管理するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-10-31 08:26:02

オリジナル

432 人が閲覧しました

How Can I Dynamically Manage Headers in AngularJS Partial Views?

AngularJS 部分ビューを使用した動的ヘッダー管理

AngularJS で部分ビューを操作する場合、タイトルやヘッダーなどのページ要素を以下に基づいて更新します。アクティブなビューは難しい場合があります。これは、これらの要素が部分ビューコントローラーの範囲外に存在することが多いためです。

この問題を解決する 1 つのアプローチには、共有サービスとイベントが含まれます。たとえば、部分ビューコントローラーとメインアプリケーションの間にメッセージバスを提供するサービスを作成できます。ヘッダーを更新する必要がある場合、部分ビューコントローラーは新しいヘッダー値を使用してイベントを発行できます。メインアプリケーションはこのイベントをリッスンし、それに応じてページを更新できます。

別のアプローチでは、Angular のルーティングシステムを利用します。各ルート定義にタイトルプロパティを含めることにより、アクティブなルートに基づいてページタイトルを動的に設定できます。さらに、$routeChangeSuccess イベントを使用してヘッダー要素を更新できます。

このアプローチを使用した例を次に示します。

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;
    });
}]);

ログイン後にコピー

HTML:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="'myApp &amp;mdash; ' + title">myApp</title>
...

ログイン後にコピー

以上がAngularJS 部分ビューでヘッダーを動的に管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。