How to remove angular $ modal cache?

Question

In my angular application, I have several instances $modalthat are created as:

var modalInstance = $modal.open({
        templateUrl: APP_CONFIG.TPL_PATH + '/path/template.html',
        controller: 'TemplateController'//...
});

The problem is that after viewing these modals, they are cached, and if I change them, I have to clear my browsers cache. Not a problem on the dev machine, but a problem when I provided this application to potential users.

I found them as "solutions":

// 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

Are there any sufficient solutions? Thank you in advance.

EDIT

, , .js ( <p>Data</p> <p>{{data}}</p> $scope.data = 'Data' .js). , . , .js ? ( ), (, <p>{{data}}</p><img src='{{imageUrl}}>')?

Answer 1

, "", , :

JavaScript. . - , . : ?keyword=hash. , , , , . ?keyword=hash $model.open() (DRY, KISS). angular 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 ( ) . : fooobar.com/questions/377747/....

Answer 2

:

// 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

defenitly $templateCache, . Angular Cache .

:

$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

, , $templateCache.

template.html, .

. modalTemplate_alertModal.html, modalTemplate_newEmployeeModal.html...

$templateCache .

template.html.

templateCache, .

//Get TemplateURL
var TemplateURL = APP_CONFIG.TPL_PATH + '/path/template.html';

//Remove Cached ModalTemplate
$templateCache.remove(TemplateURL);

//Open Modal
var modalInstance = $modal.open({
        templateUrl: TemplateURL,
        controller: 'TemplateController'//...
});

Answer 3

(.. <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 4

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>