避免在IE中缓存angularJS的部分视图

Avoid angularJS partial views to be cached in IE

本文关键字：视图 angularJS 缓存 IE      更新时间：2023-09-26

我正在做一个ASP。. NET MVC应用程序也有一些angularJS。我有一个有不同选项卡的主页，当你点击它们时，它们会加载一个角分段视图。主页面是这样的:

{ ... }     
<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>
{ ... }
在主控制器中，selectPage方法看起来像: 
$scope.selectPage = function (page) {
    //not relevant code removed here
    $location.path("/" + page);
};

当然我已经定义了这样的路由:

$routeProvider.when("/search", {
    templateUrl: "/Scripts/app/views/search.html"
});

现在，我需要的是这些部分视图不被缓存，至少在开发期间。为此，我使用了这里提供的方法:

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

这是完美的，除了在Internet Explorer中，它总是加载缓存的版本，即使按Ctrl+F5。

另外，我试着在布局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" />

但是没有成功。

我的问题是是否有办法避免这种行为

我找到了一个解决方法，这正是我需要的。像这样给路由添加一个版本号:

$routeProvider.when("/search", {
    templateUrl: "/Scripts/app/views/search.html" + version
});

版本为字符串，如:?v1.0.0

这样，任何时候我做改变，我只是改变版本号，当点击该页的部分视图将被再次下载。

在web中使用以下标签。配置禁用缓存

   <staticContent>
       <clientCache cacheControlMode="DisableCache" />
    </staticContent>
相关文章：