Question

在我的角度应用中，我有多个var modalInstance = $modal.open({ templateUrl: APP_CONFIG.TPL_PATH + '/path/template.html', controller: 'TemplateController'//... });个实例，其创建方式如下：

// first one
$rootScope.$on('$stateChangeStart', function(event, next, current) {
    $templateCache.remove(current.templateUrl);
}); // doesn't work because $modal doesn't change state

// second one
$rootScope.$on('$viewContentLoaded', function() {
    $templateCache.removeAll();
}); // mess Bootstrap UI which adds default partials directly to the $templateCache

// third one
$modal.open({
            templateUrl: '/app/components/your-modal.html?bust=' + Math.random().toString(36).slice(2),
            controller: 'YourModalController'
        }); // ugly and inefficient - I have to change multiple code blocks for every modal

问题是，在查看这些模态后，它们会被缓存，如果我更改它们，我将被迫清除浏览器缓存。在开发机器上不是问题，但是当我向潜在用户提供此应用程序时，这是一个问题。

到目前为止，我发现这些是“解决方案”：

<p>Data</p>

有足够的解决方案吗？提前谢谢。

修改

我得到的一个额外建议是更改模板数据并将其放入.js文件（即{j}中的<p>{{data}}</p>到$scope.data = 'Data'和<p>{{data}}</p><img src='{{imageUrl}}>'。我在这里看到两个问题。如何确保浏览器不缓存.js文件？如果模板结构（额外变量）被缓存（即paintApp.controller('intController', ['$scope','$location','$log', function($scope,$location, $log){ this.images = []; for(i = 1 ; i <51 ; i++){ this.images.push(i); } this.currentPage = 1 ; this.numPerPage = 9 ; this.maxSize = 6; this.pageChanged = function() { $location.path( "int/"+this.currentPage , false); }; }]); paintApp.filter('imgThumb', function(){ return function(images, start){ return images.slice(start); } });），我如何才能对模板结构添加额外的更改？

Answer 1

好吧，当我们谈论“充足”时，这是品味和特殊问题，但我确实觉得这个答案非常令人满意：

您无法直接使用JavaScript删除浏览器的缓存。这是由于安全需求。这样做有点不对 - 很多聪明的开发人员都知道更好的存储内容和删除内容。但有一个简单的伎俩：使用?keyword=hash。即使您看到的页面类似，如果它们有不同的哈希值，那么浏览器将存储两个版本的页面。在每个?keyword=hash中添加$model.open()是令人烦恼和不专业的（DRY，KISS）。我们先使用角度interceptors。

yourApp.factory('HttpInterceptor', function($templateCache, APP_CONFIG) {
  return {
    'request': function(request) {
      if (request.method === 'GET' && $templateCache.get(request.url) === undefined) {
        request.url += '?ver=' + APP_CONFIG.VERSION;
      }
      return request;
    }
  };
});

将其放入$httpProvider.interceptors：

$httpProvider.interceptors.push('HttpInterceptor');

现在您可以指定版本号（例如，从您的仓库获取，或包含时间戳）。版本已更改 - 浏览器加载新版本的模板。 if $templateCache.get(request.url) === undefined条件用于过滤预先缓存（可能自动注入）内容的请求。拦截器的想法来自这里：https://stackoverflow.com/a/25060769/4753661。

Answer 2

我可以有一个静态标题（即<h2>Create new entry</h2>）。然后改变它（_ <h2>Create new user entry</h2>）。如果我以前查看了模态，我将无法在不清除缓存的情况下获取更新的标题。

根据此声明，您真正想要做的是使用controller和$scope来更新这些值。

<h2>{{modalHeader}}</h2>

然后，无论您在哪里定义标题需要更新的值，

$scope.modalHeader = "Create new user entry";

请记住angularjs编译并管理DOM正确更改DOM值的唯一方法是使用directives。

Answer 3

将以下部分添加到您的webconfig中。您需要手动清除当前的浏览器缓存，但是重新加载页面将会起作用，

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
        <add name="Pragma" value="no-cache" />
        <add name="Expires" value="0" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

如何删除角度$ modal缓存？

3 个答案: