415

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"; }
4

22 に答える 22

634

ルーティングを使用している場合にページタイトルを設定するための優れた方法を発見しました。

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>
...

編集：ng-bindカーリーの代わりに属性を使用して、{{}}ロード時に表示されないようにします

于 2012-11-15T22:17:55.870 に答える
342

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

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

service：Pageを作成し、コントローラーから変更します。

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

コントローラから「 Page.setTitle Page（）」を挿入して呼び出します。

具体的な例は次のとおりです。http： //plnkr.co/edit/0e7T6l

于 2012-09-20T05:55:53.173 に答える
194

javascriptを使用してタイトルを直接設定することもできることに注意してください。

$window.document.title = someTitleYouCreated;

これにはデータバインディングはありませんがng-app、<html>タグの挿入に問題がある場合はそれで十分です。（たとえば<head>、正確に1つの場所で定義されているJSPテンプレートを使用しているにもかかわらず、複数のアプリがあります。）

于 2013-01-28T15:18:55.810 に答える
120

要素で宣言ng-appすると、とhtmlの両方のルートスコープが提供されます。headbody

$rootScopeしたがって、コントローラでこれにヘッダープロパティを挿入して設定します。

function Test1Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 1"; }

function Test2Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 2"; }

そしてあなたのページで：

<title ng-bind="header"></title>
于 2013-05-31T04:43:15.197 に答える
43

モジュールangularjs-viewheadは、カスタムディレクティブのみを使用してビューごとにタイトルを設定するメカニズムを示しています。

コンテンツがすでにビュータイトルになっている既存のビュー要素に適用できます。

<h2 view-title>About This Site</h2>

...またはスタンドアロン要素として使用できます。この場合、要素はレンダリングされたドキュメントでは非表示になり、ビューのタイトルを設定するためにのみ使用されます。

<view-title>About This Site</view-title>

このディレクティブの内容は、ルートスコープでとしてviewTitle使用可能になるため、他の変数と同じようにtitle要素で使用できます。

<title ng-bind-template="{{viewTitle}} - My Site">My Site</title>

ルートスコープを「見る」ことができる他のスポットでも使用できます。例えば：

<h1>{{viewTitle}}</h1>

このソリューションでは、プレゼンテーションの残りの部分を制御するために使用されるのと同じメカニズムであるAngularJSテンプレートを介してタイトルを設定できます。これにより、この表示ロジックでコントローラーを乱雑にする必要がなくなります。コントローラは、タイトルを通知するために使用されるすべてのデータを利用できるようにする必要がありますが、テンプレートはそれを表示する方法を最終的に決定し、式の補間とフィルタを使用して通常どおりスコープデータにバインドできます。

（免責事項：私はこのモジュールの作成者ですが、他の誰かがこの問題を解決するのに役立つことを期待して、ここで参照しています。）

于 2013-12-08T07:08:41.157 に答える
32

これは、リソース固有のページタイトルを設定するためにコントローラーに$rootScopeを挿入する必要がない私に適したソリューションです。

マスターテンプレートの場合：

<html data-ng-app="myApp">
    <head>
    <title data-ng-bind="page.title"></title>
    ...

ルーティング構成の場合：

$routeProvider.when('/products', {
    title: 'Products',
    templateUrl: '/partials/products.list.html',
    controller: 'ProductsController'
});

$routeProvider.when('/products/:id', {
    templateUrl: '/partials/products.detail.html',
    controller: 'ProductController'
});

そして実行ブロックで：

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.page = {
        setTitle: function(title) {
            this.title = title + ' | Site Name';
        }
    }

    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.page.setTitle(current.$$route.title || 'Default Title');
    });
}]);

最後にコントローラーで：

function ProductController($scope) {
    //Load product or use resolve in routing
    $scope.page.setTitle($scope.product.name);
}
于 2013-07-27T13:19:01.570 に答える
16

jkoreskaのソリューションは、タイトルを事前に知っている場合は完璧ですが、リソースなどから取得したデータに基づいてタイトルを設定する必要がある場合があります。

私のソリューションには単一のサービスが必要です。rootScopeはすべてのDOM要素のベースであるため、前述のようにhtml要素にコントローラーを配置する必要はありません。

Page.js

app.service('Page', function($rootScope){
    return {
        setTitle: function(title){
            $rootScope.title = title;
        }
    }
});

index.jade

doctype html
html(ng-app='app')
head
    title(ng-bind='title')
// ...

タイトルを変更する必要があるすべてのコントローラー

app.controller('SomeController', function(Page){
    Page.setTitle("Some Title");
});
于 2014-03-17T23:29:51.913 に答える
11

タイトルまたはメタディスクリプションを動的に設定できるクリーンな方法。例では、ui-routerを使用していますが、ngRouteも同じように使用できます。

var myApp = angular.module('myApp', ['ui.router'])

myApp.config(
    ['$stateProvider', function($stateProvider) {
        $stateProvider.state('product', {
            url: '/product/{id}',
            templateUrl: 'views/product.html',
            resolve: {
                meta: ['$rootScope', '$stateParams', function ($rootScope, $stateParams) {
                    var title = "Product " + $stateParams.id,
                        description = "Product " + $stateParams.id;
                    $rootScope.meta = {title: title, description: description};
                }]

                // Or using server side title and description
                meta: ['$rootScope', '$stateParams', '$http', function ($rootScope, $stateParams, $http) {
                    return $http({method: 'GET', url: 'api/product/ + $stateParams.id'})
                        .then (function (product) {
                            $rootScope.meta = {title: product.title, description: product.description};
                        });
                }]

            }
            controller: 'ProductController'
        });
    }]);

HTML：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="meta.title + ' | My App'">myApp</title>
...
于 2014-07-06T22:33:24.153 に答える
8

または、 ui-routerを使用している場合：

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="$state.current.data.title || 'App'">App</title>

ルーティング

$stateProvider
  .state('home', {
      url: '/',
      templateUrl: 'views/home.html',
      data: {
        title: 'Welcome Home.'
      }
  }
于 2014-07-25T21:28:13.767 に答える
7

カスタムイベントベースのソリューション

これは、ここで他の人が言及していない別のアプローチです（この記事の執筆時点で）。

次のようなカスタムイベントを使用できます。

// your index.html template
<html ng-app="app">
<head>
<title ng-bind="pageTitle">My App</title>

// your main app controller that is declared on the <html> element
app.controller('AppController', function($scope) {
    $scope.$on('title-updated', function(newTitle) {
        $scope.pageTitle = newTitle;
    });
});

// some controller somewhere deep inside your app
mySubmodule.controller('SomeController', function($scope, dynamicService) {
    $scope.$emit('title-updated', dynamicService.title);
});

このアプローチには、追加のサービスを記述してから、タイトルを設定する必要のあるすべてのコントローラーに注入する必要がないという利点があります。また、を（乱用）使用することもありません$rootScope。また、動的タイトルを設定することもできます（コード例のように）。これは、ルーターの構成オブジェクトでカスタムデータ属性を使用することはできません（少なくとも私が知る限り）。

于 2014-03-27T16:56:55.500 に答える
5

タグを含むngAppがないシナリオの場合はtitle、ウィンドウタイトルを設定する必要があるコントローラーにサービスを注入するだけです。

var app = angular.module('MyApp', []);

app.controller('MyController', function($scope, SomeService, Title){
    var serviceData = SomeService.get();
    Title.set("Title of the page about " + serviceData.firstname);
});

app.factory('SomeService', function ($window) {
    return {
        get: function(){
            return { firstname : "Joe" };
        }
    };
});

app.factory('Title', function ($window) {
    return {
        set: function(val){
            $window.document.title = val;
        }
    };
});

実例... http：//jsfiddle.net/8m379/1/

于 2013-07-19T17:11:36.353 に答える
5

タイトル要素（asp.net Webフォームなど）を制御できない場合は、ここで使用できるものがあります

var app = angular.module("myApp")
    .config(function ($routeProvider) {
                $routeProvider.when('/', {
                                            title: 'My Page Title',
                                            controller: 'MyController',
                                            templateUrl: 'view/myView.html'
                                        })
                            .otherwise({ redirectTo: '/' });
    })
    .run(function ($rootScope) {
        $rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
            document.title = currentRoute.title;
        });
    });
于 2013-08-06T16:30:09.160 に答える
4

を使用したシンプルで汚い方法$rootScope：

<html ng-app="project">
<head>
<title ng-bind="title">Placeholder title</title>

コントローラで、タイトルの作成に必要なデータがある場合は、次の手順を実行します。

$rootScope.title = 'Page X'
于 2013-11-18T13:39:14.277 に答える
4

これらの答えはどれも直感的には思えなかったので、これを行うための小さなディレクティブを作成しました。このようにして、通常はページでタイトルを宣言することができ、動的にすることもできます。

angular.module('myModule').directive('pageTitle', function() {
    return {
        restrict: 'EA',
        link: function($scope, $element) {
            var el = $element[0];
            el.hidden = true; // So the text not actually visible on the page

            var text = function() {
                return el.innerHTML;
            };
            var setTitle = function(title) {
                document.title = title;
            };
            $scope.$watch(text, setTitle);
        }
    };
});

もちろん、モジュール名を自分の名前に合わせて変更する必要があります。

<title>これを使用するには、通常のタグの場合と同じように、これをビューにスローします。

<page-title>{{titleText}}</page-title>

動的に含める必要がない場合は、プレーンテキストを含めることもできます。

<page-title>Subpage X</page-title>

または、属性を使用して、IEに適したものにすることもできます。

<div page-title>Title: {{titleText}}</div>

もちろん、Angularコードを含め、タグには任意のテキストを入れることができます。この例では$scope.titleText、カスタムタイトルタグが現在どのコントローラーにあるかを検索します。

ページに複数のページタイトルタグがないことを確認してください。そうしないと、タグが互いにぶつかります。

プランカーの例はこちらhttp://plnkr.co/edit/nK63te7BSbCxLeZ2ADHV。タイトルの変更を確認するには、zipをダウンロードしてローカルで実行する必要があります。

于 2014-07-21T19:30:39.300 に答える
4

angle-ui-routerの単純なソリューション：

HTML：

<html ng-app="myApp">
  <head>
     <title ng-bind="title"></title>
     .....
     .....  
  </head>
</html>

App.js>myApp.configブロック

$stateProvider
    .state("home", {
        title: "My app title this will be binded in html title",
        url: "/home",
        templateUrl: "/home.html",
        controller: "homeCtrl"
    })

App.js> myApp.run

myApp.run(['$rootScope','$state', function($rootScope,$state) {
   $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    $rootScope.title = $state.current.title;
    console.log($state);
   });
}]);
于 2017-06-09T13:09:11.147 に答える
3

タイトルを変更する別の方法は次のとおりです。おそらくファクトリ関数（おそらく無制限のページを処理できる）ほどスケーラブルではありませんが、私には理解しやすかったです：

私のindex.htmlでは、次のように始めました。

    <!DOCTYPE html>
      <html ng-app="app">
        <head>
          <title ng-bind-template="{{title}}">Generic Title That You'll Never See</title>

次に、「nav.html」という部分を作成しました。

<div ng-init="$root.title = 'Welcome'">
    <ul class="unstyled">
        <li><a href="#/login" ng-click="$root.title = 'Login'">Login</a></li>
        <li><a href="#/home" ng-click="$root.title = 'Home'">Home</a></li>
        <li><a href="#/admin" ng-click="$root.title = 'Admin'">Admin</a></li>
        <li><a href="#/critters" ng-click="$root.title = 'Crispy'">Critters</a></li>
    </ul>
</div>

次に、「index.html」に戻り、パーシャルにng-includeとng-viewを使用してnav.htmlを追加しました。

<body class="ng-cloak" ng-controller="MainCtrl">
    <div ng-include="'partials/nav.html'"></div>
    <div>
        <div ng-view></div>
    </div>

ng-cloakに注意してください。この回答とは何の関係もありませんが、読み込みが完了するまでページを非表示にします。いい感じです:)ここで方法を学びましょう：Angularjs-ng-cloak/ng-show要素が点滅します

これが基本モジュールです。「app.js」というファイルに入れました。

(function () {
    'use strict';
    var app = angular.module("app", ["ngResource"]);

    app.config(function ($routeProvider) {
        // configure routes
        $routeProvider.when("/", {
            templateUrl: "partials/home.html",
            controller:"MainCtrl"
        })
            .when("/home", {
            templateUrl: "partials/home.html",
            controller:"MainCtrl"
        })
            .when("/login", {
            templateUrl:"partials/login.html",
            controller:"LoginCtrl"
        })
            .when("/admin", {
            templateUrl:"partials/admin.html",
            controller:"AdminCtrl"
        })
            .when("/critters", {
            templateUrl:"partials/critters.html",
            controller:"CritterCtrl"
        })
            .when("/critters/:id", {
            templateUrl:"partials/critter-detail.html",
            controller:"CritterDetailCtrl"
        })
            .otherwise({redirectTo:"/home"});
    });

}());

モジュールの終わりを見ると、：idに基づいた生き物の詳細ページがあることがわかります。これは、CrispyCrittersページから使用される部分的なものです。[コーニー、私は知っています-多分それはあらゆる種類のチキンナゲットを祝うサイトです;）とにかく、ユーザーが任意のリンクをクリックしたときにタイトルを更新できるので、私のメインのクリスピークリッターページでクリッター詳細ページにつながります、上記のnav.htmlで見たように、ここで$root.titleの更新が行われます。

<a href="#/critters/1" ng-click="$root.title = 'Critter 1'">Critter 1</a>
<a href="#/critters/2" ng-click="$root.title = 'Critter 2'">Critter 2</a>
<a href="#/critters/3" ng-click="$root.title = 'Critter 3'">Critter 3</a>

風が強いので申し訳ありませんが、私はそれを稼働させるのに十分な詳細を提供する投稿を好みます。AngularJSドキュメントのサンプルページは古く、0.9バージョンのng-bind-templateが表示されていることに注意してください。それほど違いはないことがわかります。

後付け：あなたはこれを知っていますが、それは他の誰かのためにここにあります。index.htmlの下部に、モジュールにapp.jsを含める必要があります。

        <!-- APP -->
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>
于 2012-09-21T23:04:26.320 に答える
3

これを解決しなければならなかったときng-app、ページのhtmlタグにを配置できなかったので、次のサービスで解決しました。

angular.module('myapp.common').factory('pageInfo', function ($document) {

    // Public API
    return {
        // Set page <title> tag. Both parameters are optional.
        setTitle: function (title, hideTextLogo) {
            var defaultTitle = "My App - and my app's cool tagline";
            var newTitle = (title ? title : defaultTitle) + (hideTextLogo ? '' : ' - My App')
            $document[0].title = newTitle;
        }
    };

});
于 2015-06-11T15:34:26.680 に答える
2

MichaelBromleyに触発されたカスタムイベントベースのソリューション

$ scopeで動作させることができなかったので、rootScopeで試してみましたが、もう少し汚いかもしれません...（特に、イベントを登録しないページを更新する場合）

しかし、私は物事がどのように緩く結合されているかという考えが本当に好きです。

私はangularjs1.6.9を使用しています

index.run.js

angular
.module('myApp')
.run(runBlock);

function runBlock($rootScope, ...)
{
  $rootScope.$on('title-updated', function(event, newTitle) {
    $rootScope.pageTitle = 'MyApp | ' + newTitle;
  });
}

anyController.controller.js

angular
.module('myApp')
.controller('MainController', MainController);

function MainController($rootScope, ...)
{
  //simple way :
  $rootScope.$emit('title-updated', 'my new title');

  // with data from rest call
  TroncQueteurResource.get({id:tronc_queteur_id}).$promise.then(function(tronc_queteur){
  vm.current.tronc_queteur = tronc_queteur;

  $rootScope.$emit('title-updated', moment().format('YYYY-MM-DD') + ' - Tronc '+vm.current.tronc_queteur.id+' - ' +
                                             vm.current.tronc_queteur.point_quete.name + ' - '+
                                             vm.current.tronc_queteur.queteur.first_name +' '+vm.current.tronc_queteur.queteur.last_name
  );
 });

 ....}

index.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title ng-bind="pageTitle">My App</title>

それは私のために働いています:)

于 2018-05-04T11:49:31.357 に答える
1

他の人がより良い方法を持っているかもしれませんが、私のビュー/テンプレートのそれぞれが別個のコントローラーを持っているので、私は私のコントローラーで$rootScopeを使用することができました。各コントローラーに$rootScopeを挿入する必要があります。これは理想的ではないかもしれませんが、私にとっては機能しているので、私はそれを渡す必要があると思いました。ページを調べると、タイトルタグにng-bindingが追加されます。

コントローラーの例：

myapp.controller('loginPage', ['$scope', '$rootScope', function ($scope, $rootScope) {

// Dynamic Page Title and Description
$rootScope.pageTitle = 'Login to Vote';
$rootScope.pageDescription = 'This page requires you to login';
}]);

Index.htmlヘッダーの例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{pageDescription}}">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<base href="/">
<title>{{pageTitle}}</title>

また、pageTitleとpageDescriptionを、REST呼び出しからデータを返すなどの動的な値に設定することもできます。

    $scope.article = restCallSingleArticle.get({ articleID: $routeParams.articleID }, function() {
    // Dynamic Page Title and Description
    $rootScope.pageTitle = $scope.article.articletitle;
    $rootScope.pageDescription = $scope.article.articledescription;
});

繰り返しになりますが、他の人はこれにアプローチする方法についてより良いアイデアを持っているかもしれませんが、私は事前レンダリングを使用しているので、私のニーズは満たされています。

于 2015-03-08T05:07:55.923 に答える
0

解決してくれたtoshshimayamaに感謝します。
サービスを直接に入れるのはそれほどクリーンではないと思ったので$scope、これを少し変更します：http: //plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs

コントローラー（元の回答では少し馬鹿げているように見えました）がActionBarオブジェクトを作成し、これが$scopeに詰め込まれます。
オブジェクトは、実際にサービスを照会する責任があります。また、テンプレートURLを設定するための呼び出しを$ scopeから非表示にします。代わりに、他のコントローラーがURLを設定するために使用できます。

于 2013-03-06T17:08:10.087 に答える
0

ハッシュ氏はこれまでのところ最良の答えを持っていましたが、以下の解決策は、次の利点を追加することにより、（私にとって）理想的なものになります。

  • 時計を追加しないため、速度が低下する可能性があります
  • コントローラーで行った可能性のあることを実際に自動化しますが、
  • それでも必要な場合は、コントローラーからのアクセスを許可します。
  • 余分な注入はありません

ルーター内：

  .when '/proposals',
    title: 'Proposals',
    templateUrl: 'proposals/index.html'
    controller: 'ProposalListCtrl'
    resolve:
      pageTitle: [ '$rootScope', '$route', ($rootScope, $route) ->
        $rootScope.page.setTitle($route.current.params.filter + ' ' + $route.current.title)
      ]

実行ブロック内：

.run(['$rootScope', ($rootScope) ->
  $rootScope.page =
    prefix: ''
    body: ' | ' + 'Online Group Consensus Tool'
    brand: ' | ' + 'Spokenvote'
    setTitle: (prefix, body) ->
      @prefix = if prefix then ' ' + prefix.charAt(0).toUpperCase() + prefix.substring(1) else @prifix
      @body = if body then ' | ' + body.charAt(0).toUpperCase() + body.substring(1) else @body
      @title = @prefix + @body + @brand
])
于 2014-08-23T19:33:07.393 に答える
-4

私が見つけたより良い動的な解決策は、$ watchを使用して変数の変更をトレースしてから、タイトルを更新することです。

于 2014-12-31T02:38:57.933 に答える