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

在我的HTML页面,我有:

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

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

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

有什么解决办法吗?


当前回答

我发布这篇文章只是为了涵盖所有的可能性,因为其他的解决方案都不适合我(他们由于角引导模板依赖而抛出错误)。

当你在开发/调试一个特定的模板时,你可以确保它总是通过在路径中包含一个时间戳来刷新,就像这样:

       $modal.open({
          // TODO: Only while dev/debug. Remove later.
          templateUrl: 'core/admin/organizations/modal-selector/modal-selector.html?nd=' + Date.now(),
          controller : function ($scope, $modalInstance) {
            $scope.ok = function () {
              $modalInstance.close();
            };
          }
        });

注意templateUrl变量中最后的?nd=' + Date.now()。

其他回答

如果你正在使用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"方法来达到同样的效果。

我发布这篇文章只是为了涵盖所有的可能性,因为其他的解决方案都不适合我(他们由于角引导模板依赖而抛出错误)。

当你在开发/调试一个特定的模板时,你可以确保它总是通过在路径中包含一个时间戳来刷新,就像这样:

       $modal.open({
          // TODO: Only while dev/debug. Remove later.
          templateUrl: 'core/admin/organizations/modal-selector/modal-selector.html?nd=' + Date.now(),
          controller : function ($scope, $modalInstance) {
            $scope.ok = function () {
              $modalInstance.close();
            };
          }
        });

注意templateUrl变量中最后的?nd=' + Date.now()。

这是Chrome的另一个选项。

按F12打开开发人员工具。然后资源>缓存存储>刷新缓存。

我喜欢这个选项,因为我不需要像其他答案那样禁用缓存。

正如其他人所说,完全出于开发目的而击败缓存可以很容易地做到,而不需要更改代码:使用浏览器设置或插件。在dev之外,要想打败Angular对基于路由的模板的模板缓存,可以在$routeChangeStart(或$stateChangeStart,对于UI Router)期间从缓存中删除模板URL,就像Shayan演示的那样。但是,这并不影响ng-include加载的模板的缓存,因为这些模板不是通过路由器加载的。

I wanted to be able to hotfix any template, including those loaded by ng-include, in production and have users receive the hotfix in their browser quickly, without having to reload the entire page. I'm also not concerned about defeating HTTP caching for templates. The solution is to intercept every HTTP request that the app makes, ignore those that are not for my app's .html templates, then add a param to the template's URL that changes every minute. Note that the path-checking is specific to the path of your app's templates. To get a different interval, change the math for the param, or remove the % completely to get no caching.

// this defeats Angular's $templateCache on a 1-minute interval
// as a side-effect it also defeats HTTP (browser) caching
angular.module('myApp').config(function($httpProvider, ...) {
    $httpProvider.interceptors.push(function() {
        return {
            'request': function(config) {
                config.url = getTimeVersionedUrl(config.url);
                return config;
            }
        };
    });

    function getTimeVersionedUrl(url) {
        // only do for html templates of this app
        // NOTE: the path to test for is app dependent!
        if (!url || url.indexOf('a/app/') < 0 || url.indexOf('.html') < 0) return url;
        // create a URL param that changes every minute
        // and add it intelligently to the template's previous url
        var param = 'v=' + ~~(Date.now() / 60000) % 10000; // 4 unique digits every minute
        if (url.indexOf('?') > 0) {
            if (url.indexOf('v=') > 0) return url.replace(/v=[0-9](4)/, param);
            return url + '&' + param;
        }
        return url + '?' + param;
    }

没有解决方案可以防止浏览器/代理缓存,因为您无法控制它。

另一种方式,强制新鲜内容给您的用户它重命名HTML文件!就像https://www.npmjs.com/package/grunt-filerev对资产所做的那样。