Node.js 使用平均堆栈的动态页面标题-Jade和Angular_Node.js_Angularjs_Express_Pug_Mean Stack

Node.js 使用平均堆栈的动态页面标题-Jade和Angular

node.js angularjs express

Node.js 使用平均堆栈的动态页面标题-Jade和Angular,node.js,angularjs,express,pug,mean-stack,Node.js,Angularjs,Express,Pug,Mean Stack,在我的MEAN stack应用程序中，我试图根据页面上加载的内容更改页面标题（用jade设置）。目前，它为SPA中的每个页面显示一个通用页面标题要设置索引的页面标题，我正在执行以下操作 index.js res.render('index', { title: 'Generic Page Title' }); 然后，当我返回内容（不同角度的路线/页面）时，我想更新此标题 offers.js Offer.find(searchObject).sort('-pricing.pctSav

在我的MEAN stack应用程序中，我试图根据页面上加载的内容更改页面标题（用jade设置）。目前，它为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

 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')

我不确定如何改变这一点，因为报价在页面中以json的形式返回。我已尝试将标题添加到响应中（res.locals.title='testunique title'），但它不起作用

有什么想法吗

谢谢

添加更多信息：

我可以在jade模板中包含一些html，如下所示：

杰德校长

title= appName+' - '+title

 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>


测试//工作
{{test}}//offers controller中的测试集-不工作
{{Page.title（）}}//注入到提供控制器中的页面-不起作用

提供的控制器直到稍后才加载

谢谢。

我知道您不会在每次请求到达服务器时都返回jade文件。由于SPA使用angularjs，您的应用程序将从服务器加载按需数据。您必须更改代码中的标题

HMTL

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

每当路线改变时

Inject `Page` and Call `Page.setTitle()` from controllers.

我知道，您不会在每次请求到达服务器时都返回jade文件。由于SPA使用angularjs，您的应用程序将从服务器加载按需数据。您必须更改代码中的标题

HMTL

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

每当路线改变时

Inject `Page` and Call `Page.setTitle()` from controllers.

我认为实现这一点的一种方法是将当前页面标题作为标题与响应一起发送，这样就不必将不相关的信息放入JSON模型中

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

然后，我使用请求拦截器和指令的组合，读取标题并根据该标题字段更新标题标记

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;
      }
    }
  }
]);

看到那砰的一声了吗使用firebug，您可以观察标题标签

关于

我认为实现这一点的一种方法是将当前页面标题作为标题发送给您的响应，这样您就不必将不相关的信息放入JSON模型中

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

然后，我使用请求拦截器和指令的组合，读取标题并根据该标题字段更新标题标记

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;
      }
    }
  }
]);

看到那砰的一声了吗使用firebug，您可以观察标题标签

关于

您可以使用javascript从平均堆栈中的AngularJS控件内部更改页面标题

简单运行

document.title = "Current Page Title";

在每个控制器的开头。

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

简单运行

document.title = "Current Page Title";

在每个控制器的开头。

感谢您的回复。请查看编辑，以了解我仍然存在的问题…感谢您的回复。请查看编辑，了解我仍然存在的问题…在AngularJS应用程序中，使用客户端代码而不是服务器代码更频繁地更改内容，因此每次使用javascript（AngularJS）时都需要更改页面标题加载新页面视图。在AngularJS应用程序中，使用客户端代码而不是服务器代码更频繁地更改内容，因此每次javascript（AngularJS）加载新页面视图时都需要更改页面标题。这是解决问题的一种方法，但当整个应用程序中有足够数量的控制器时，应用程序就会变得不可管理。这是解决问题的一种方法，但当整个应用程序中有足够数量的控制器时，应用程序就会变得不可管理。