Угловое изображение NgStyle не освежает

Question

Я пытаюсь изменить фоновое изображение на основе изменения размера окна. Я получаю правильный вывод в консоли с точки зрения пути изображения, который мне нужен. Но по какой-то причине URL-адрес просто не обновляется в div.

Это в директиве:

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> 

Как вы можете видеть, что я пытался добавить случайные параметры в конец URL с ?v=n, чтобы попытаться вызвать обновление , Но хотя изменяется index, физический адрес slideImage не обновляется.

Может кто-то пролить свет на этот вопрос?

Answer 1

Быстрое сканирование кода показывает, что вы должны использовать $timeout, а не setTimeout. В то время как обе вещи выполняют таймер штрафа, setTimeout происходит за пределами углового, поэтому задания $scope не будут обновляться. Если вы используете setTimeout, вам необходимо обернуть свой код назначения в $scope.apply().

Подробнее об этом можно прочитать здесь. https://docs.angularjs.org/api/ng/service/$timeout