BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] AngularJSの部分的なビューに基づいて動的にヘッダーを変更するには？

2022-03-24 18:36:41

質問

ng-viewを使ってAngularJSの部分ビューをインクルードしていますが、インクルードされたビューに基づいてページタイトルとh1のヘッダタグを更新したいのです。しかし、これらは部分ビューコントローラの範囲外なので、コントローラ内のデータセットにバインドする方法を見つけることができません。

ASP.NET MVCだったら@ViewBagを使えばいいのですが、AngularJSでこれに相当するものはわかりません。共有サービス、イベントなどについて検索しましたが、まだ動作させることができません。私の例を修正して動作させる方法があれば、とてもありがたいです。

私のHTML 

<html data-ng-app="myModule">
<head>
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
</head>
<body>
<h1><!-- should changed when ng-view changes --></h1>

<div data-ng-view></div>

</body>
</html>

私のJavaScriptです。 

var myModule = angular.module('myModule', []);
myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}).
        when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}).
        otherwise({redirectTo: '/test1'});
}]);

function Test1Ctrl($scope, $http) { $scope.header = "Test 1"; 
                                  /* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; }

解決方法は？

でコントローラを定義することができます。 <html> レベルである。 

 <html ng-app="app" ng-controller="titleCtrl">
   <head>
     <title>{{ Page.title() }}</title>
 ...

サービスを作成します。 Page を作成し、コントローラから修正します。 

myModule.factory('Page', function() {
   var title = 'default';
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
});

インジェクト Page で、コントローラから 'Page.setTitle()' を呼び出します。

以下はその具体例です。 http://plnkr.co/edit/0e7T6l

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します