dynamic页面标题使用MEAN堆栈 – Jade和Angular
在我的MEAN堆栈应用程序中,我试图根据页面上加载的内容来改变页面标题(设置为翡翠)。 目前,它显示SPA内每个页面的通用页面标题。
要设置索引的页面标题,我正在这样做
index.js
res.render('index', { title: 'Generic Page Title' });
那么当我返回内容(不同的angular度路线/页面)我想更新这个标题
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); } });
head.jade
title= appName+' - '+title
我不确定如何更改此优惠作为json在页面中返回。 我已经尝试将标题添加到响应(res.locals.title ='testing唯一标题'),但它不起作用。
有任何想法吗?
谢谢!
添加更多信息:
我可以在jade模板中包含一些html,如下所示:
head.jade
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>
报价控制器直到后来才加载…
谢谢。
我明白,每次请求打到你的服务器时,你都不会返回玉文件。 由于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.
我认为实现这一目标的方式是将当前页面标题作为标题发送给您的响应,因此您不必将无关的信息放入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使用萤火虫,你可以观察标题标签
问候
您可以在MEAN堆栈中使用JavaScript从AngularJS控制器中更改页面标题。
只需运行
document.title = "Current Page Title";
在每个控制器的开始。