如果條件不觸發

我有一個if語句來檢查變量是true還是false並綁定一個mousewheel事件，並且我有一個滾動事件將該變量設置爲true。問題是，我的條件只是在加載時觸發，而不是當值更改爲真時。內部控制如果條件不觸發

代碼示例：

$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語句也不會觸發。

來源

2017-10-12 Nemanja Grabovac

看起來您的代碼中沒有任何內容會觸發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 
});

來源

2017-10-12 13:33:51 Ben

創建一個方法含有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

來源

2017-10-12 13:34:30

如果條件不觸發

回答

相關問題