我在 MEAN 应用程序中的模板缓存方面遇到一些困难。我有一个导航栏，它使用条件逻辑来显示/隐藏向用户显示的按钮。当用户点击页面时，这些值将被设置为 null 或 false，但是一旦他们登录，这些值就会改变(views、isLoggedIn)
我的问题是这样的 - 当我第一次点击该页面时，这些值按预期设置为 null/false，并且按钮被隐藏。
但是，成功登录后， Angular 登录 Controller 将通过 $location.path("/pathAfterLogin"); 进行重定向，并将用户带到正确的状态，但带有隐藏按钮。只有在进行硬刷新 (control-f5) 后，页面才会刷新并根据 app.js 文件中设置的值显示相应的按钮。
我正在使用 Angular 1.5，UI 路由器，Express 4 , Swig templates ，以及 consolidate模板引擎。 NODE.ENV 即将开发。
我也尝试过在我能想到的每个地方禁用缓存。
我的 app.js 文件如下所示:
'use strict';
var express = require('express'),
path = require('path'),
cons = require('consolidate'),
swig = require('swig');
module.exports = function() {
var app = express(); //start an express app app.disable('view cache');
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views',path.join(__dirname,'../app/views'));
app.set('view cache', false ); //set cache
swig.setDefaults({ cache: false });
app.get('*', stuff.test, function(req, res, next) {
res.setHeader('Cache-Control', 'no-cache');
res.render('index', {
cache: false,
views: req.views,
isLoggedIn: req.isLoggedIn
});
});
return app;
};
HTML 文件是我的主要布局/ View ，因为这是一个打开了 URL 重写的单页应用程序。下面的index.html 文件还包含一个导航文件。
<!doctype html>
<html ng-app="myapp" ng-cloak xmlns="http://www.w3.org/1999/html">
<head>
<base href="/" />
( truncated ... )
</head>
<body>
<header>{% include "../../public/templates/header.html" %}</header>
<header>{% include "../../public/templates/navigation.html" %}</header>
<div class="res whitespace">
<ui-view/>
</div>
</body>
<script src = "angular.js"></script>
<script src = "loginCtrl.js"></script>
<script src = "loginSrvc.js"></script>
</html>
包含的导航文件:
<div id="subtitle">
<ul class="nav nav-pills pull-right">
{% if !isLoggedIn %}<li ui-sref-active="active"><a ui-sref="login">Login</a></li>{% endif %}
{% if isLoggedIn %}<li ui-sref-active="active"><a ui-sref="logout">Logout</a></li>{% endif %}
{% for item in views %}
{% if item == "linkA" %}<li ui-sref-active="active"><a ui-sref="linkA">LinkA</a></li>{% endif %}
{% if item == "LinkB" %}<li ui-sref-active="active"><a ui-sref="linkB">LinkB</a></li> {% endif %}
{% endfor %}
{% if !isLoggedIn %}<li ui-sref-active="active"><a ui-sref="info">Info </a></li>{% endif %}
<li class="dropdown"ui-sref-active="active">
{% for item in views %}
{% if resource == "mainDD" %} <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Drop Downs <span class="caret"></span></a>
<ul class="dropdown-menu">
{% for item in permissions %}
{% if item == "link1" %}<li><a ui-sref="link1">Link 1</a></li>{% endif %}
{% if item == "link2" %}<li><a ui-sref="link2">Link 2</a></li>{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</li>
</
ul>
我有 2 个问题:
- 缓存是否已适当关闭？如果不是，我哪里出错了？
- 关闭缓存时这是预期的行为吗？
最佳答案
问题在于您将后端模板与前端路由混合在一起:
{% if isLoggedIn %}<li ui-sref-active="active"><a ui-sref="logout">Logout</a></li>{% endif %}
isLoggedIn是一个服务器端变量，用于确定其内容( <li> )是否应显示在生成的 HTML 中。
如果用户在生成 HTML 时尚未登录，则只有模板的完整(服务器端)重新呈现才会导致“注销”按钮出现在提供给浏览器的 HTML。
要解决此问题，您需要重新加载页面(我已经有一段时间没有使用 Angular，但 $window.location.reload() 曾经可以工作)，以便服务器有机会提供更新的 HTML。
或者，您可以考虑将是否显示特定页面元素的模板逻辑移至 Angular:
<li ng-if="loggedIn" ui-sref-active="active"><a ui-sref="logout">Logout</a></li>
(其中 loggedIn 是 Controller 中的变量)
需要明确的是:这与缓存无关。 Express 中的 View 缓存不会缓存渲染的模板(即 HTML)，而是缓存已编译的模板(通常，必须从文件中读取模板，进行处理或“编译”，然后准备好用于渲染)。
关于javascript - 模板缓存 ExpressJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38379704/