각도 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> 

당신은 내가 새로 고침을 트리거 할 시도 ?v=n와 URL의 끝에 임의의 PARAM를 추가하는 시도 볼 수 있듯이 . 그러나 index은 변경되지만 실제 slideImage URL은 업데이트되지 않습니다.

누군가가이 문제에 대해 밝힐 수 있습니까?

Answer 1

코드를 빠르게 검사하면 setTimeout 대신 $timeout을 사용해야한다는 것을 알 수 있습니다. 두 가지 모두 타이머를 잘 실행하지만 setTimeout이 각도를 벗어나서 발생하므로 $scope 할당이 업데이트되지 않습니다. setTimeout을 사용하는 경우 $scope.apply()에 할당 코드를 래핑해야합니다.

자세한 내용은 여기를 참조하십시오. https://docs.angularjs.org/api/ng/service/$timeout