[英]Avoid angularJS partial views to be cached in IE
I'm working on an ASP.NET MVC application that also has some angularJS. 我正在开发也具有一些angularJS的ASP.NET MVC应用程序。 I have a main page that has different tabs that when you click them they load an angular partial view.
我有一个主页,其中包含不同的选项卡,当您单击它们时,它们会加载一个角度局部视图。 This is how the main page looks like:
这是主页的外观:
{ ... }
<div class="widget-div" ng-controller="mainController">
<div class="widget-body">
<div class="tabs-left">
<ul id="demo-pill-nav" class="nav nav-tabs tabs-left" style="width: 160px">
<li ng-class="getMenuClass('/search')">
<a href="javascript:void(0);" ng-click="selectPage('search')">Search</a>
</li>
<li ng-class="getMenuClass('/addressVerification')">
<a href="javascript:void(0);" ng-click="selectPage('addressVerification')">Address Verification</a>
</li>
<li ng-class="getMenuClass('/dashboard')">
<a href="javascript:void(0);" ng-click="selectPage('dashboard')">Dashboard</a>
</li>
<li ng-class="getMenuClass('/editProfile')">
<a href="javascript:void(0);" ng-click="selectPage('editProfile')">Update Profile</a>
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane">
<ng:view />
</div>
</div>
</div>
</div>
</div>
{ ... }
In the main controller, the selectPage method looks like: 在主控制器中,selectPage方法如下所示:
$scope.selectPage = function (page) {
//not relevant code removed here
$location.path("/" + page);
};
And of course I have defined the routes like: 当然,我已经定义了以下路线:
$routeProvider.when("/search", {
templateUrl: "/Scripts/app/views/search.html"
});
Now, what I need is these partial views to not get cached, at least while in development. 现在,我需要的是至少在开发过程中不缓存这些局部视图。 For that I used the method provided here :
为此,我使用了这里提供的方法:
myApp.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
That worked perfect except in Internet Explorer, which always will load the cached version even when hitting Ctrl+F5. 除了Internet Explorer(Internet Explorer)外,这非常完美,即使在按Ctrl + F5时,Internet Explorer始终将加载缓存的版本。
Also, I tried setting the HTTP headers in the layout html, like this: 另外,我尝试在布局html中设置HTTP标头,如下所示:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
But that didn't work. 但这没有用。
So my question is if there is any way to avoid this behavior. 所以我的问题是是否有任何方法可以避免这种行为。
I found a workaround that is exactly what I need. 我找到了我真正需要的解决方法。 Adding a version number to the route like this:
向路由添加版本号,如下所示:
$routeProvider.when("/search", {
templateUrl: "/Scripts/app/views/search.html" + version
});
where version is a string like: ?v1.0.0
其中版本是一个字符串,如:
?v1.0.0
That way any time I make a change I just change the version number and when hitting that page the partial view will be downloaded again. 这样,无论何时我进行更改,我都只需更改版本号,然后在单击该页面时,将再次下载部分视图。
use below tag in web.config to disable caching 在web.config中使用以下标记禁用缓存
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.