1

私の MEAN スタック アプリでは、ページに読み込まれたコンテンツに応じてページ タイトル (翡翠で設定) を変更しようとしています。現時点では、SPA 内のすべてのページに一般的なページ タイトルが表示されます。

インデックスのページタイトルを設定するには、これを行っています

index.js

 res.render('index', {
    title: 'Generic Page Title'
});

次に、コンテンツ（別の角度ルート/ページ）を返すときに、このタイトルを更新したい

offers.js

Offer.find(searchObject).sort('-pricing.pctSavings').exec(function(err, offers){
  if (err) {
    res.render('error', {
      status: 500
    });
  } else {
    //update title?
    res.jsonp(offers);
  }
});

ヘッドジェイド

title= appName+' - '+title

ページ内でオファーが json として返されるため、これを変更する方法がわかりません。応答にタイトルを追加しようとしました (res.locals.title = 'Test unique title') が機能しません。

何か案は？

ありがとう！

詳細情報の追加:

次のように、jade テンプレートにいくつかの html を含めることができます。

ヘッドジェイド

 head
   div(data-ng-include="'views/dynamic_title.html'")
   meta(charset='utf-8')
   meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
   meta(name='viewport', content='width=device-width,initial-scale=1,user-scalable=no')

ビュー/dynamic_title.html

<div data-ng-controller="OffersController">
    <title> Test </title> //works
    <title> {{test}} </title> //test set in offers controller - doesn't work
    <title> {{ Page.title() }}</title> //Page injected into offers controller - doesn't work
</div>

オファーコントローラーは後でロードされます...

ありがとう。

4

3 に答える 3

3

リクエストがサーバーにヒットするたびに jade ファイルを返すわけではないことを理解しました。SPA は angularjs を使用しているため、アプリはサーバーからオンデマンド データをロードします。angular js コードのタイトルを変更する必要があります。

HTML

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

JS

angular.module('app', [])
.factory('Page', function() {
   var title = 'default';
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
})
.controller('TitleCtrl', function($scope, Page) {
    $scope.Page = Page;
})
.controller('RouterPathCtrl', function($scope, Page) {
    Page.setTitle('My new title')
});

ルートが変わるたびに、

Inject `Page` and Call `Page.setTitle()` from controllers.
于 2014-01-26T10:04:23.577 に答える
1

これを達成する方法は、現在のページ タイトルを応答のヘッダーとして送信することだと思います。そのため、関係のない情報を JSON モデルに入れる必要はありません。

res.set("title", "some title");

API

次に、リクエスト インターセプターとディレクティブを組み合わせて、ヘッダーを読み取り、そのヘッダー フィールドに応じてタイトル タグを更新します。

module.factory("Page", function() {
  return {
    title: "index"
  }
});
module.directive("title", ["Page",
  function(Page) {

    return {
      restrict:"E",
      link: function($scope, $element) {
        $scope.$watch(function() {
          return Page.title;
        }, function(newValue) {
          $element.html(newValue);
        })
      }
    }
  }
]);
module.factory("PageTitleInterceptor", ["Page",
  function(Page) {
    return {
      response: function(response) {
        Page.title = response.headers("title");
        return response;
      }
    }
  }
]);

Plunk http://plnkr.co/edit/ZNSUnqJkGXdTv9MfERYF?p=preview firebug を使用すると、タイトルタグを確認できます。

よろしく

于 2014-01-26T18:06:00.967 に答える