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

eh

在我的MEAN Stack应用程序中,我试图根据页面上加载的内容更改页面标题(在翡翠中设置)。目前,它为SPA中的每个页面显示通用页面标题。

要设置索引的页面标题,我正在这样做

index.js

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

然后,当我返回内容(不同的角度路线/页面)时,我想更新此标题

offer.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 ='测试唯一标题'),但是它不起作用。

有任何想法吗?

谢谢!

添加更多信息:

我可以在翡翠模板中包含一些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>

直到稍后才加载offers控制器...

谢谢。

杜汗

我了解您不会在每次请求命中服务器时都返回玉文件。由于SPA使用angularjs,因此您的应用程序会从服务器按需加载数据。您必须在您的angular js代码中更改标题。

HMTL

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Angular,Express和Jade刷新特定页面(使用html5mode)

动态php标题取决于页面ID和“ if(isset)”的使用

使用 Pug (Jade) 和 JavaScript 的动态表单

从函数返回的Stange值(使用popcorn.js,angular和jade)

如何安装和使用Jade

在Angular中动态设置页面标题

MEAN堆栈,我不想使用Jade,如何使用HTML

Angular / Nodejs / Jade动态显示局部

Express,Jade和NodeJS:在页面之间导航

如何使用动态标题和返回从父组件导航到子组件的页面?

使用CoffeeScript / Jade的流星上的Angular

使用Jade模板进行插入和更新?

在angularjs和jade中使用无限滚动

Angular 中浏览器显示和 Google Analytics 的动态页面标题

我该如何使用angular js通过控制器传递动态标题和描述,以用于每个产品的详细信息页面?

Angular 2动态页面页眉和页脚

使用 ReactJS 的动态页面标题

关于使用angular-cli的MEAN 2堆栈

Jade / Pug与Angular 2-如何使用#语法解决冲突?

使用HTML,CSS和Jade创建图像幻灯片

如何使用Express JS和Jade访问instagram API?

无法使用Jade和Node显示复选框

如何通过热重载使用Jade和Webpack编码HTML

使用AngularJS和Jade在navbar中进行Bootstrap下拉

使用Node.js和mysql表实现Jade

如何使用 jade 和 express 在脚本标签中动态生成 javascript

使用 Python 和 Excel 制作动态主题标题和日期

Angular SEO如何正确实现动态标题和元?

使用Angular 2新路由器更改页面标题