Question

我有一个if语句，用于检查变量是true还是false并绑定mousewheel事件，并且我有一个scroll事件将该变量设置为true。问题是，我的if条件只在加载时被触发，而不是在值变为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语句也不会触发。

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

如果条件未触发

2 个答案: