Question

我正在尝试根据窗口调整大小更改背景图像。我在控制台中根据我需要的图像路径获得正确的输出。但由于某种原因，网址中的url不会更新。

这是一个指令：

angular.element($window).on('resize', function(){

    waitForFinalEvent(function(){
        checkSize();
    }, 500);


});    


 $scope.index = 0;
var checkSize = function(){
    var width = angular.element($window).width();
    var height = angular.element($window).height()

    console.log('w: ' +width);
    console.log('h: '+height);

    $scope.index ++;

    if(width < 1050 && width > 800 ) {

        $scope.slideImage = $scope.displaySlideImageM;

        console.log('here1: ' +$scope.slideImage);
    } else if(width < 799 && height < 800) {    
        $scope.slideImage = $scope.displaySlideImageM;

        console.log('here2: ' +$scope.slideImage);

    } else if(width < 799 && height > 800) {
        $scope.slideImage = $scope.displaySlideImageP;

        console.log('here3: ' +$scope.slideImage);

    } else {
        $scope.slideImage = $scope.displaySlideImageO;

        console.log('here4: ' +$scope.slideImage);
    }                    
}


var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms) {
        if (timers) {
            clearTimeout(timers);
        }
        timers = setTimeout(callback, ms);
    };
})();

HTML：

<div class="result-slide" ng-style="{'background-image':'url('+ slideImage +'?v='+ index +')'}"></div>

如您所见，我尝试在?v=n的网址末尾添加随机参数，以尝试触发刷新。但是，虽然index更改了，但物理slideImage网址未更新。

有人可以对这个问题有所了解吗？

Answer 1

快速扫描代码表明您应该使用$timeout而不是setTimeout。虽然两者都可以正常执行计时器，setTimeout会出现在角度之外，因此$scope分配不会更新。如果您使用setTimeout，则需要将作业代码包装在$scope.apply()。

中

你可以在这里阅读更多内容。 https://docs.angularjs.org/api/ng/service/$timeout

Angular NgStyle背景图片并不令人耳目一新

1 个答案: