Angular滚动指令

当你使用隔离类时，你的指令范围与你的控制器范围不同，控制器范围不会因为scope: {..}而继承到指令范围，当你想改变父范围的标志时，你需要在你的指令中传递该值，=将执行双向绑定，因为内部范围变量的变化将影响到父范围变量的值。

Makrup

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

您可以尝试这样做:

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>

然后在父作用域中定义changeActiveClass:

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