避免 AngularJS 部分视图在 IE 中缓存

2024-05-09

我正在开发一个 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"
});

现在,我需要的是这些部分视图不被缓存,至少在开发过程中是这样。为此,我使用了提供的方法here https://stackoverflow.com/a/14721340/1329771:

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

除了在 Internet Explorer 中外,这一切都很完美,即使按 Ctrl+F5,Internet Explorer 也始终会加载缓存版本。

另外,我尝试在布局 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

这样,每当我进行更改时,我只需更改版本号,当点击该页面时,部分视图将再次下载。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

避免 AngularJS 部分视图在 IE 中缓存 的相关文章

随机推荐