Angular 滚动指令

Question

我尝试创建一个带有两个参数的指令，class 和 pageYOffset。如果 pageYOffset 大于 attr 中的数字，我想检查我的元素的滚动位置并添加一个 class 名称。我无法触发 class 更改。

HTML

<div scroll offset="1500" ng-class="{active : scrollClass}"></div>

指令

app.directive('scroll', function($window) {
    return {
        scope: {
          offset: "@offset"
        },
        link: function (scope, element, attr) {
            angular.element($window).bind("scroll", function() {
                if (this.pageYOffset >= scope.offset) {
                    scope.scrollClass = true;
                }
                scope.$apply();
            });
        }
    }
});

Answer 1

您可以尝试这样的操作：

app.directive('scroll', function($window) {
    return {
        scope: {
          offset: "@offset",
          toggleScroll: "&toggle"
        },
        link: function (scope, element, attr) {
            angular.element($window).bind("scroll", function() {
                if (this.pageYOffset >= scope.offset) {
                    toggle();
                }
                //scope.$apply();
            });
        }
    }
});

<div scroll offset="1500" toggle-scroll="changeActiveClass()" ng-class="{active : scrollClass}"></div>

然后在您的父范围中定义更改活动类：

$scope.changeActiveClass = function() {
    $scope.scrollClass = !scrollClass;
}

Answer 2

由于您使用的是隔离 class，您的指令作用域与控制器作用域不同，控制器作用域不会继承到指令作用域，因为 scope: {..}，因为您想要更改标志父作用域，您需要使用 = 在指令中传递该值，这将执行两种方式绑定，因为内部作用域变量更改将影响父作用域变量值。

马克鲁普

<div scroll offset="1500" scroll-class="scrollClass" ng-class="{active : scrollClass}"></div>

指令

app.directive('scroll', function($window) {
    return {
        scope: {
          offset: "@offset",
          scrollClass: '='
        },
        link: function (scope, element, attr) {
            angular.element($window).bind("scroll", function(event) {
                if (element.pageYOffset >= scope.offset) {
                    //this will change the parent scope variable value to true
                    scope.scrollClass = true;
                }
                scope.$apply(); //need full to run digest cycle
            });
        }
    }
});

Angular 滚动指令

Angular scroll directive

angularjs

events

angularjs-directive

responsive-design

ng-class