我在AngularJS中缓存部分有问题。

在我的HTML页面,我有:

<body>
 <div ng-view></div>
<body>

我的偏导数被载入的地方。

当我改变HTML代码在我的部分,浏览器仍然加载旧数据。

有什么解决办法吗?


当前回答

正如在其他答案中提到的,这里和这里,缓存可以通过使用:

$templateCache.removeAll();

然而,正如gateatigrado在评论中所建议的那样,这只在html模板没有任何缓存头的情况下才会起作用。

这对我来说是可行的:

角:

app.run(['$templateCache', function ( $templateCache ) {
    $templateCache.removeAll(); }]);

您可能会以各种方式添加缓存头,但这里有几个解决方案适合我。

如果使用IIS,请将此添加到web.config中:

<location path="scripts/app/views">
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>
</location>

如果使用Nginx,你可以添加到你的配置:

location ^~ /scripts/app/views/ {
    expires -1;   
}

Edit

我刚刚意识到这个问题提到了开发机器,但希望这仍然可以帮助到一些人……

其他回答

Firefox(33.1.1)使用Firebug(22.0.6)的解决方案

工具> Web-Tools > Firebug > Firebug。 在Firebug视图中转到“Net”视图。 一个下拉菜单符号将出现在“Net”(视图的标题)旁边。 从下拉菜单中选择“禁用浏览器缓存”。

正如在其他答案中提到的,这里和这里,缓存可以通过使用:

$templateCache.removeAll();

然而,正如gateatigrado在评论中所建议的那样,这只在html模板没有任何缓存头的情况下才会起作用。

这对我来说是可行的:

角:

app.run(['$templateCache', function ( $templateCache ) {
    $templateCache.removeAll(); }]);

您可能会以各种方式添加缓存头,但这里有几个解决方案适合我。

如果使用IIS,请将此添加到web.config中:

<location path="scripts/app/views">
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>
</location>

如果使用Nginx,你可以添加到你的配置:

location ^~ /scripts/app/views/ {
    expires -1;   
}

Edit

我刚刚意识到这个问题提到了开发机器,但希望这仍然可以帮助到一些人……

如果你谈论的是用于模板缓存而不需要重新加载整个页面的缓存,那么你可以通过如下方式清空它:

.controller('mainCtrl', function($scope, $templateCache) {
  $scope.clearCache = function() { 
    $templateCache.removeAll();
  }
});

在标记中:

<巴顿ngk -click=“clearCache()”>清廉缓存</按钮>

并按此按钮清除缓存。

如果你正在使用UI路由器,那么你可以使用装饰器和更新$templateFactory服务,并将查询字符串参数附加到templateUrl,浏览器将始终从服务器加载新模板。

function configureTemplateFactory($provide) {
    // Set a suffix outside the decorator function 
    var cacheBust = Date.now().toString();

    function templateFactoryDecorator($delegate) {
        var fromUrl = angular.bind($delegate, $delegate.fromUrl);
        $delegate.fromUrl = function (url, params) {
            if (url !== null && angular.isDefined(url) && angular.isString(url)) {
                url += (url.indexOf("?") === -1 ? "?" : "&");
                url += "v=" + cacheBust;
            }

            return fromUrl(url, params);
        };

        return $delegate;
    }

    $provide.decorator('$templateFactory', ['$delegate', templateFactoryDecorator]);
}

app.config(['$provide', configureTemplateFactory]);

我相信你可以通过装饰$routeProvider中的"when"方法来达到同样的效果。

这个代码片段帮助我摆脱了模板缓存

app.run(function($rootScope, $templateCache) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        if (typeof(current) !== 'undefined'){
            $templateCache.remove(current.templateUrl);
        }
    });
});

以下片段的详细信息可在此链接中找到: http://oncodesign.io/2014/02/19/safely-prevent-template-caching-in-angularjs/