Wenn keine Bedingung ausgelöst wird

Question

Ich habe eine if-Anweisung, die prüft, ob eine Variable wahr oder falsch ist und ein Mausrad-Ereignis bindet, und ich habe ein Bildlaufereignis, das diese Variable auf true setzt. Das Problem ist, dass meine if-Bedingung nur beim Laden triggered wird, nicht wenn der Wert sich in true ändert.

Codebeispiel innen Controller:

$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(); 
     }); 
    } 

Was will ich Mausrad auf einem Overlay auslösen erreichen ist, und schalten Inhalt (erste Folie und die zweite Folie), dann weiter Seite blättern. Aber meine if-Anweisung wird nicht ausgelöst, obwohl die Variable auf "true" gesetzt ist.

Answer 1

Es sieht nicht so aus, als würde irgendetwas in Ihrem Code die if-Anweisung auslösen, und die Anweisung selbst hat keine Möglichkeit zu wissen, wann Ihre secondActive-Eigenschaft aktualisiert wurde. Ich denke, was Sie wollen, ist $scope.$watch:

Registriert einen Listener Callback ausgeführt werden, wenn die WatchExpression ändert.

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

Answer 2

Erstellen einer Methode die if condition code und Anruf von onload sowie aus event listener enthält.

$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