지시문 템플릿 강제 다시 로드

지시문 템플릿 강제 다시 로드

Angular를 작업하고 있습니다.몇 가지 지침이 있는 JS 앱.디렉티브의 템플릿은 별도의 html 파일에 저장됩니다.이러한 템플릿을 편집할 때 브라우저는 새로고침 후 변경을 감지하지 않고 항상 캐시된 버전을 사용합니다.소스 코드에 대한 기타 변경이 검출되어 새로고침이 발생합니다.

문제는 Angular가 사용하고 있는 것으로 보이는 $templateCache에 있습니다.템플릿 로드 시 JS.

AngularJS 1.0.2의 소스 코드에서 찾은 것은 컴파일의 일부인 4317 행에서 다음과 같습니다.TemplateUrl():

$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})

혹시 다른 사람이 이런 문제를 겪었거나 Angular에게 말할 방법이 있는지 궁금합니다.캐시할 때와 캐시하지 않을 때 JS.

오래된 질문인 것은 알지만, 간단한 수정이 하나 있습니다. 비록 해킹이 조금 어렵지만, 이 방법은 효과적입니다. $templateCache에 대해 아무것도 할 필요가 없습니다.

이 문제가 발생할 때마다(다이렉트템플릿이나 스태틱 JSON 파일에서도 확인), 로드되는 URL 끝에 다음과 같이 쿼리 파라미터를 추가합니다.

...
templateUrl: "partials/template.html?1",
...

템플릿을 변경할 때 새로고침되지 않을 때마다 마지막에 이 숫자를 늘립니다.브라우저는 이것이 서버에 특별한 의미가 있는지 여부를 인식하지 못하기 때문에 변경된 URL이 캐시되었는지 여부에 관계없이 새로고침을 시도해야 합니다.이것에 의해, 파일이 실가동 환경에서 새로고침 되는 것도 확인할 수 있습니다.

javascript 앱이므로 템플릿 캐시는 브라우저에 저장됩니다.실제로 개발자 도구를 사용하여 $캐시를 수동으로 공급하거나 브라우저가 템플릿을 캐싱하지 못하도록 할 수 있습니다(실가동에서는 캐시에 문제가 없는 것처럼 보이므로).

캐시 강제 공급의 경우:

function Main($cache) {
    $cache.data['first.html'] = {value: 'First template'};
    $cache.data['second.html'] = {value: '<b>Second</b> template'};

}

Main.$inject = ['$xhr.cache'];​

이 바이올린으로 작동하는 걸 봐

브라우저가 템플릿을 캐싱하지 않도록 하려면(이 문제에 대해 Google 그룹 게시물에서 인용)

우리 팀과 나는 이 같은 문제에 부딪쳤다.Chrome 사용 중 개발 솔루션은 Developer Tools를 열고 오른쪽 하단에 있는 기어를 선택하는 것이었습니다.그런 다음 [네트워크] - [캐시 사용 안 함]을 선택합니다.

이로써 부분/템플릿 캐싱 문제가 모두 해결되었습니다.

app.controller('someCtrl', function ($scope, $cacheFactory, templateRequest)
{   
    $scope.refreshTemplate = function ()
    {
      var tpl = "<template name>";
      $cacheFactory.get('templates').remove(tpl);
      $templateRequest(tpl).then(function ok(){
          console.log("Template "+tpl+" loaded.");
      });
     }
   ...
  }

refreshTemplate 함수를 호출하면 새로고침이 발생합니다.

언급URL : https://stackoverflow.com/questions/13450926/force-reload-of-a-directives-template