使用 MEAN 堆栈的动态页面标题 - Jade 和 Angular答案

【问题标题】：Dynamic Page Titles using MEAN stack - Jade and Angular使用 MEAN 堆栈的动态页面标题 - Jade 和 Angular
【发布时间】：2014-02-17 04:00:39
【问题描述】：

在我的 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')

views/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>

优惠控制器直到稍后才会加载...

谢谢。

【问题讨论】：

标签： node.js angularjs express pug mean-stack

【解决方案1】：

我了解到，每次请求访问您的服务器时，您都不会返回翡翠文件。由于 SPA 使用 angularjs，您的应用程序会按需从服务器加载数据。您必须更改 Angular js 代码中的标题。

HMTL

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

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.

【讨论】：

感谢您的回复。请查看关于我仍然遇到的问题的编辑...

【解决方案2】：

我认为实现这一点的一种方法是将当前页面标题作为标题与您的响应一起发送，因此您不必将不相关的信息放入您的 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 使用萤火虫，您可以观察标题标签

问候

【讨论】：

在 AngularJS 应用程序中使用客户端代码而不是服务器代码更频繁地更改内容，因此每次 javascript (AngularJS) 加载新页面视图时都需要更改页面标题。

【解决方案3】：

您可以使用 javascript 从 MEAN 堆栈中的 AngularJS 控制器内部更改页面标题。

简单运行

document.title = "Current Page Title";

在每个控制器的开头。

【讨论】：

这是解决问题的一种方法，但是当整个应用程序中有足够数量的控制器时，应用程序就会变得难以管理。