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 &mdash; ' + title">myApp</title> ...
以上がAngularJS 部分ビューでヘッダーを動的に管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。