在局部视图内加载Angular脚本——缓存问题

Angular Script Loading inside partial view - caching issues

本文关键字:脚本 缓存 问题 Angular 加载 局部 视图      更新时间:2023-09-26

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

这是我的设置:ui-router设置ui-view请求/profile<app-home-profile></app-home-profile>

appHomeProfile指令设置如下:

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

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

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

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

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

任何关于如何解决这个问题的帮助是感激的!

谢谢,尼克

与jQuery相反,由于jqLite的简化实现,Angular在请求的模板中不支持<script>。可以这样修改

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

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