Question

亲爱的朋友/同事，

正如我在之前的一个问题中所提到的，我只是在学习AngularJS，我有一个问题。

我想要完成的是以下内容：

我有一个很大版本的徽标位于div内部，现在，我希望能够在导航栏中显示相同徽标的小版本，一旦大版本滚动出视图，使用AngularJS 。我可以用JQuery和scrollSpy做到这一点，但项目是AngularJS特有的，我知道Angular可以处理这个任务，它似乎我无法掌握它。

非常感谢任何帮助。

Answer 1

你可以为此编写和使用指令。其中，您应该使用滚动量，并使用ng-show在小徽标div上使用指令返回的滚动量的最小值。

我会尝试为你编写指令

.directive('dirScrollTop', function($window, $parse) {
    return {
        scope: {
            scroll: '=dirScrollTop'
        },
        link: function(scope, element, attrs) {
            var windowEl = angular.element($window);
            var handler = function(e) {
                scope.scroll = $window.pageYOffset;
            }
            windowEl.on('scroll', scope.$apply.bind(scope, handler));
            handler();
        }
    };
})

并在html内部，将其写在包含徽标的<div>或<img>或...内：

<div dir-scroll-top="scrollVariable" ng-show="scrollVariable > someValue">

并在您的控制器内定义$scope.scrollVariable = 0和$scope.someValue，并为第二个提供滚动所需的像素数量，使您的另一个<div>不在视野范围内......您应该为其分配一个数字如$scope.someValue=100;

我还应该说，在指令中使用getBoundingClientRect()动态地（特别是如果你的设计是响应的并且距离不是静态的）动态获得最大量是更好的： / p>

var someValue = element[0].getBoundingClientRect().top;

并检查指令内的距离，并直接返回一个布尔值。所以它会是这样的：

var handler = function(e) {
     var someValue = element[0].getBoundingClientRect().top;
     var scrollOffset = $window.pageYOffset;
     scope.scroll = $window.pageYOffset > someValue;
}

并且html会像这样：

<div dir-scroll-top="scrollVariable" ng-show="scrollVariable">

并在控制器中定义：

$scope.scrollVariable = false;

<强>更新

所以，如果我没错，你想在窗口滚动使较大的图像离开视图时显示/隐藏这两个图像。

logoShow.directive('dirScrollTop', function($window, $parse) {
return {
    scope: {
        scroll: '=dirScrollTop'
    },
    link: function(scope, element, attrs) {
        var windowEl = angular.element($window);
        var someValue = element[0].getBoundingClientRect().bottom;
        var handler = function(e) {
            var scrollOffset = element[0].scrollTop;
            scope.scroll = scrollOffset > someValue;
        };
        windowEl.on('scroll', scope.$apply.bind(scope, handler));
        handler();
    }
};
});

和html：

<div class="logo-big">
  <img src="assets/img/logo_big.png" dir-scroll-top="scrollVariable" class="img-responsive center-block" />
</div>

和

    <div class="navbar-brand" ng-show="scrollVariable">
      <img src="assets/img/logo_menu.png" />
    </div>

控制器：

logoShow.controller('logoShowCtrl', function($scope) {
    $scope.scrollVariable = false;
});

当大图像完全脱离视图时（当它的底部到达视图的顶部时），这将显示徽标。如果您希望在较大图片的顶部到达视图顶部时发生这种情况，则应将element[0].getBoundingClientRect().bottom替换为指令内的element[0].getBoundingClientRect().top。

Answer 2

好的，这是我写的，它应该可以工作，但是有可能而不是pageYoffset将所有这些应用到特定的div id吗？

.directive("scroll", function($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
            if (this.pageYOffset >=500) {
                scope.boolChangeClass = true;
                console.log('Scrolled out of view.');
            } else {
                scope.boolChangeClass = false;
                console.log('Logo is in view.');
            }
            scope.$apply();
        });
    }
});

编辑：

这是我所做的，可能是错的：

var logoShow = angular.module('myApp.logoShow', []);

logoShow.controller('logoShowCtrl', function($scope) {
    $scope.scrollVariable = false;
});


logoShow.directive('dirScrollTop', function($window, $parse) {
    return {
        scope: {
            scroll: '=dirScrollTop'
        },
        link: function(scope, element, attrs) {
            var windowEl = angular.element($window);
            var handler = function(e) {
                var someValue = element.getBoundingClientRect().top;
                var scrollOffset = element(0).scrollTop;
                scope.scroll = element.getBoundingClientRect() > someValue;
            };
            windowEl.on('scroll', scope.$apply.bind(scope, handler));
            handler();
        }
    };
});

编辑2

这是我要展示的徽标：

<div class="navbar-brand">
          <img src="assets/img/logo_menu.png" />
        </div>

当这个滚出视图时：

<div class="logo-big">
      <img src="assets/img/logo_big.png" dir-scroll-top="scrollVariable" class="img-responsive center-block" />
    </div>

当div使用AngularJS滚出视图时，在导航栏中显示徽标

2 个答案: