Thay đổi url nguồn trên $ includeContentRequested

Question

Tôi muốn thay đổi url mỗi khi một chỉ thị ng-include yêu cầu một phần. Cho đến nay tôi có thể nhìn thấy url và sự kiện như thế này:

app.run(function ($rootScope) { 
    $rootScope.$on('$includeContentRequested', function (event, url) { 
     console.log(event); 
     console.log(url); 
    }); 
}); 

Bây giờ tôi cần để có thể thay đổi url từ 'templates/incs/includedPartial.html' để 'templates/incs/includedPartial.html?cache_version=1_1', sau đó bao gồm các phần với các liên kết mới.

Rõ ràng là tôi đang thực hiện việc này để ngăn các vấn đề về bộ nhớ đệm khi thay đổi phiên bản. Đây có phải là một chiến lược tốt hay là có một giải pháp tốt hơn? Cảm ơn trước vì đã giúp đỡ ...

Answer 1

Tôi nghĩ rằng tôi thực sự đã tìm ra câu trả lời cho điều này. Những gì bạn có thể làm là tạo ra một kẻ đánh chặn. Vì tất cả các yêu cầu với ng-include thực sự đi qua $ httpProvider chung chung, bạn có thể chặn yêu cầu và thêm bộ đệm ẩn.

app.factory("cacheBusterFactory", [ "VERSION", function(VERSION) { 
    return { 
     request: function(config) { 
      if(config.url.indexOf(".html", config.url.length - ".html".length) !== -1) { 
       config.url += "?v=" + VERSION.toString(); 
      } 

      return config; 
     } 
    }; 
} ]); 

"VERSION" trong trường hợp này là một hằng số góc mà tôi thay đổi theo từng triển khai:

app.constant("VERSION", 0.1); 

Và thêm buster nhớ cache được đơn giản như:

.config([ "$httpProvider", function($httpProvider) { 
    $httpProvider.interceptors.push("cacheBusterFactory"); 
} ]) 

Như bạn có thể thấy tôi chỉ chặn các tệp .html vì đó là những tệp duy nhất tôi cần thêm bộ nhớ cache busting vào. Bạn có thể mở rộng hoặc xây dựng lại "cacheBusterFactory" cho phù hợp với nhu cầu của bạn.

Answer 2

Tôi gặp sự cố với $templateCache và các mẫu được xác định trước (ví dụ: Bootstrap UI). Tôi đã giải quyết nó bằng cách kiểm tra bộ nhớ cache.

app.factory("cacheBusterFactory", [ "$templateCache", "VERSION", function($templateCache, VERSION) { 
    return { 
     request: function(config) { 
      if(config.cache === $templateCache 
       && !angular.isDefined($templateCache.get(config.url))) !== -1) { 
       config.url += "?v=" + VERSION.toString(); 
      } 

      return config; 
     } 
    }; 
} ]);