Question

我正在使用Angular UI路由到不同的状态。我的主页加载了应用于它的图像背景，并且在成功登录后，登录页面应该加载而没有任何图像背景。

问题是当第一次加载登录页面时加载图像背景，就像在主页中一样，即使脚本标签单独放在登录页面本身，当我刷新页面时它也不是加载背景图片。

这是因为缓存？或者我是否必须使用像grunt或requirejs这样的工具动态加载我的脚本标签？

使用script.js file内的backstrech JS加载图像，如下所示：

$.backstretch("assets/img/backgrounds/1.jpg");

UI-视图：

<div id="wrapper">
    <div class="row">
        <div ui-view="header" ng-if="$state.current.name != 'Home'"></div>
        <div ng-class="{'col-xs-3': $state.current.name != 'Home'}">
            <div ui-view="sidebar" ng-if="$state.current.name != 'Home'"></div>
        </div>
        <div ng-class="{'col-xs-9': $state.current.name != 'Home'}">
            <div ui-view="content"></div>
        </div>
    </div>
    <div class="push"></div>
</div>
<div ui-view="footer" ng-if="$state.current.name != 'Home'"></div>

登录页面：

<body>
    <div>
        <h3>Login-page</h3>
    </div>

    <!-- Javascript -->
    <script src="assets/js/jquery.backstretch.min.js"></script>
    <script src="assets/js/scripts.js"></script>
</body>

我正在尝试用新脚本标记+日期时间替换脚本标记以防止图像缓存。我实现了它直到这里。如何将其应用于指令

myApp.directive('preventCaching', function () {

    return{
        restrict: 'EA',
        scope: false,
        replace: false,
        translude: true,
        link: link,
//        template: '<ng-transclude></ng-transclude>'
    };
    function link(scope, element, attrs) {
        scope.scriptFile = element.find('script')[0];
        scope.src = scope.scriptFile.src;
        scope.srcLastSlashIndex = scope.src.lastIndexOf('/');
        scope.fileName = scope.src.substring(scope.srcLastSlashIndex + 1, scope.src.length);
        scope.preFileName = scope.src.substring(0, scope.srcLastSlashIndex + 1);
        scope.replacedFileName = scope.preFileName + scope.fileName + '?' + new Date().getMilliseconds();
        console.log("replacedFileName: " + scope.replacedFileName);
    }
});

内页指令：

<prevent-caching>
    <script src="assets/js/scripts.js" type="text/javascript"></script>
</prevent-caching>

如何为特定图像禁用缓存

0 个答案: