조건이 트리거되지 않는 경우

Question

변수가 true 또는 false인지 확인하고 mousewheel 이벤트를 바인딩하는 if 문이 있으며 해당 변수를 true로 설정하는 scroll 이벤트가 있습니다. 문제는 my 조건이 true 일 때 값이 true로 변경 될 때가 아니라로드시에만 trigered된다는 점입니다. 컨트롤러 내부

코드 예제 :

오버레이에 마우스 휠을 트리거 및 콘텐츠 (첫 번째 슬라이드와 두 번째 슬라이드를) 전환하는 것입니다 무엇을 달성하고자

$scope.first = angular.element(document.querySelector('#first')); 
$scope.second = angular.element(document.querySelector('#second')); 

$scope.firstActive = true; 
$scope.secondActive = false; 

angular.element($window).bind("scroll", function() { 
     var scrollTop = angular.element($window).scrollTop(); 
     var firstO = $scope.first.offset().top; 
     var secondO = $scope.second.offset().top; 

     var firstDistance = (scrollTop - firstO); 
     var secondDistance = (scrollTop - secondO); 

     if (firstDistance < 600) { 
      $scope.firstActive = true; 
      $scope.secondActive = false;    
     } 

     if (secondDistance >= 0) { 
      $scope.firstActive = false; 
      $scope.secondActive = true;     
     } 
}); 

if ($scope.secondActive) { 
     html.css('overflowY', 'hidden'); 
     whatIDo.css('display', 'block'); 

     angular.element(whatIDo).bind("mousewheel", function (e) { 
      if (e.originalEvent.wheelDelta < 0) { 
       //scroll down 
       console.log('Down'); 
       $scope.secondSlide = true; 
       $scope.firstSlide = false; 
       whatIDo.css('display', 'none'); 
       html.css('overflowY', 'auto'); 

      } else { 
       //scroll up 
       console.log('Up'); 
       $scope.secondSlide = false; 
       $scope.firstSlide = true; 
       whatIDo.css('display', 'none'); 
       html.css('overflowY', 'auto'); 

      } 
      $scope.$apply(); 
     }); 
    } 

, 다음 페이지를 스크롤하는 것을 계속한다. 그러나 변수가 true로 설정되어 있어도 if 문은 트리거되지 않습니다.

Answer 1

코드에 if 문을 트리거하는 내용이없는 것 같으며 문 자체에 secondActive 속성이 업데이트 된시기를 알 수있는 방법이 없습니다. 원하는 것 같아요 $scope.$watch :

watchExpression이 변경 될 때마다 실행될 리스너 콜백을 등록합니다.

$scope.$watch('secondActive', function() { 
    alert('Now I can do whatever I want when the variable changes!'); 
    // Put your if statement here 
}); 

Answer 2

if condition code를 포함하는 하나의 방법를 만들고 onload에서뿐만 아니라 event listener에서 호출합니다.

$scope.first = angular.element(document.querySelector('#first')); 
$scope.second = angular.element(document.querySelector('#second')); 

$scope.firstActive = true; 
$scope.secondActive = false; 

angular.element($window).bind("scroll", function() { 
     var scrollTop = angular.element($window).scrollTop(); 
     var firstO = $scope.first.offset().top; 
     var secondO = $scope.second.offset().top; 

     var firstDistance = (scrollTop - firstO); 
     var secondDistance = (scrollTop - secondO); 

     if (firstDistance < 600) { 
      $scope.firstActive = true; 
      $scope.secondActive = false;    
     } 

     if (secondDistance >= 0) { 
      $scope.firstActive = false; 
      $scope.secondActive = true;     
     } 
     onChange(); // call on event 
}); 

function onChange(){ 
     if ($scope.secondActive) { 
     html.css('overflowY', 'hidden'); 
     whatIDo.css('display', 'block'); 

     angular.element(whatIDo).bind("mousewheel", function (e) { 
      if (e.originalEvent.wheelDelta < 0) { 
       //scroll down 
       console.log('Down'); 
       $scope.secondSlide = true; 
       $scope.firstSlide = false; 
       whatIDo.css('display', 'none'); 
       html.css('overflowY', 'auto'); 

      } else { 
       //scroll up 
       console.log('Up'); 
       $scope.secondSlide = false; 
       $scope.firstSlide = true; 
       whatIDo.css('display', 'none'); 
       html.css('overflowY', 'auto'); 

      } 
      $scope.$apply(); 
     }); 
    } 
} 
onChange(); // call on load