Question

好的，我有点难过。

我正在尝试考虑来自jQuery背景的角度方式。

问题：如果窗口没有滚动，我只想隐藏一个固定的元素。如果有人向下滚动页面，我想隐藏元素。

我已经尝试过创建一个自定义指令，但由于滚动事件没有触发，我无法让它工作。我正在考虑一个像下面这样的简单控制器，但它甚至都没有运行。

控制器：

.controller('MyCtrl2', function($scope,appLoading, $location, $anchorScroll, $window ) {
   angular.element($window).bind("scroll", function(e) {
       console.log('scroll')
       console.log(e.pageYOffset)
       $scope.visible = false;
   })
})

查看

<a ng-click="gotoTop()" class="scrollTop" ng-show="{{visible}}">TOP</a>

现场预览 http://www.thewinetradition.com.au/new/#/portfolio

非常感谢任何想法。

Answer 1

基本指令看起来像这样。一个关键点是你需要调用scope.$apply()，因为滚动将在正常digest周期之外运行。

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
            scope.visible = false;
            scope.$apply();
        });
    };
});

我发现这个jsfiddle非常好地展示了http://jsfiddle.net/88TzF/

如何在滚动页面时隐藏元素？

1 个答案: