角色脚本在局部视图中加载 - 缓存问题

I am having issues with loading JavaScripts inside a partial view in my Angular application.

我在Angular应用程序的部分视图中加载JavaScripts时遇到问题。

This is my setup: ui-router sets the ui-view for requests to /profile as <app-home-profile></app-home-profile>.

这是我的设置:ui-router将请求的ui-view设置为 。

The appHomeProfile directive is set up as follows:

appHomeProfile指令设置如下:

app.directive('appHomeProfile', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/user/profile.html',
        controller: ...,
        controllerAs: 'profileCtrl'
    }
});

Now, inside the profile.html file I include the standard HTML and at the bottom of it some JavaScript dependencies:

现在,在profile.html文件中,我包含标准HTML,并在其底部包含一些JavaScript依赖项:

<script type="text/javascript" src="/javascripts/myScript1.js"></script>
<script type="text/javascript" src="/javascripts/myScript2.js"></script>

The problem is that the server logs show that Angular is adding the timestamp to the requests, therefore not allowing to cache any of the scripts! This doesn't happen with scripts loaded the "usual" way in the head of the document.

问题是服务器日志显示Angular正在为请求添加时间戳,因此不允许缓存任何脚本!对于在文档头部加载“通常”方式的脚本,不会发生这种情况。

GET /javascripts/myScript1.js?_=1437207405398 200 2.356 ms - 22524
GET /javascripts/myScript2.js?_=1437207405399 200 1.873 ms - 29695

Any help on how to solve this is appreciated!

任何有关如何解决这个问题的帮助表示赞赏!

Thanks, Nick

1 个解决方案

#1

As opposed to jQuery, Angular doesn't support <script> in requested templates because of jqLite simplified implementation. It can be fixed like that.

与jQuery相反,由于jqLit​​e简化实现,Angular不支持所请求模板中的

The reason why it works in your example is because you're using jQuery in your app, so it manages DOM instead of jqLite. Timestamps in AJAX requests are added to disable browser caching, it is default behaviour for jQuery. It can be disabled with

它在你的例子中工作的原因是因为你在你的应用程序中使用jQuery,所以它管理DOM而不是jqLit​​e。添加AJAX请求中的时间戳以禁用浏览器缓存,这是jQuery的默认行为。它可以被禁用

app.config(function () {
  angular.element.ajaxSetup && angular.element.ajaxSetup({ cache: true });
});