在AngularJS中滚动时不会触发$ window

Question

当我们向下滚动时$window函数没有触发。有人可以帮我吗？实际上问题是，当用户向下滚动时，应该出现一个按钮。当用户点击该按钮时，滚动条需要与返回顶部功能相同。

JavaScript代码：

app.controller('appCrtl', ['$scope', '$window', function('$scope', '$window') {

  $(window).scroll(function(event) {
    var scroll = $(window).scrollTop();
    console.log(scroll);
    if (scroll > 500 || scroll == undefined) {
      $scope.showUpArrow = false;
    } else {
      $scope.showUpArrow = true;
    }
  });
}]);

Answer 1

我发现你的代码存在一些问题，特别是在以scroll角度绑定scroll事件时，你使用angular.element将事件绑定到DOM，类似于jQuery（它是jQLite，这是一个轻量级的实现jQuery的）。

angular.element($window).bind('scroll', function () {});

此外，根据您在角度上下文中使用$scope，您必须使用$scope.$apply(function () {});包围范围操作，这将消除角度之外的代码部分的消化。

angular.element($window).bind('scroll', function () {
    $scope.$apply(function () {
        // do scope stuff here
    });
});

最后，您可以使用pageYOffset属性切换回到顶部按钮的可见性。

我已经使用您的代码做了一个示例，以演示我之前描述的用法。

angular.module('app', [])
  .controller('appCrtl', [
    '$scope',
    '$window',
    AppCtrl
  ]);

function AppCtrl($scope, $window) {

  $scope.goToTop = function() {
    $window.scrollTo(0, 0);
  };

  angular.element($window).bind('scroll', function(event) {
    $scope.$apply(function() {
      var scroll = $scope.scroll = this.pageYOffset;

      if (scroll > 100 || scroll == undefined) {
        $scope.showUpArrow = true;
      } else {
        $scope.showUpArrow = false;
      }
    });
  });
};

.floating {
  position: fixed;
  margin: 10px;
  bottom: 0;
  right: 0;
}

.display {
  position: fixed;
  margin: 0;
  padding: 2px 5px;
  top: 0;
  width: 100%;
  background-color: gray;
  color: white;
}

.spacer {
  padding: 10px 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
<div ng-app="app" ng-controller="appCrtl">

  <div class="display">scrollY: {{ scroll }}</div>
  <button class="floating" ng-show="showUpArrow" ng-click="goToTop()">^</button>

  <div class="spacer">
    <h1>HTML Ipsum Presents</h1>

    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>      Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
      sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <h2>Header Level 2</h2>

    <ol>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>

    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
        turpis elit sit amet quam. Vivamus pretium ornare est.</p>
    </blockquote>

    <h3>Header Level 3</h3>

    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>

    <pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>
  </div>
</div>

Answer 2

你不能以你尝试的方式混合jQuery和AngularJS。只需使用angular.element()绑定您的滚动事件，就像在此demo plnkr中一样。我还允许自己将if / else条件缩小为一行。

一个简单的解决方案，使其以一种很好的方式工作：

您可以使用简单的代码实现您的尝试。 AngularJS非常善于这样的逻辑。

应用：

var app = angular.module('plunker', []);

app.controller('ApplicationController', function($scope, $window) {

  $scope.showUpArrow = false;

  angular.element($window).on('scroll', function () {
      $scope.showUpArrow = $window.scrollY > 500;
      $scope.$apply();
  });

  $scope.goTop = function() {
    $window.scrollTo(0, 0);
  };
}); 

查看：

<div class="container" ng-controller="ApplicationController">
    <div class="row">
      <button class="btn-top" 
              ng-click="goTop()"
              ng-if="showUpArrow">Scroll top</button>
    </div>
</div>

<强> ---＆GT; demo plnkr

Answer 3

$(window).scroll(function (event) {语法错误，您使用的是Angularjs，而不是jQuery。正确的部分应该是：

angular.element($window).bind("scroll", function(e) {
  // do stuff 
});

并从问题中更新了代码：

app.controller('appCrtl' ,['$scope','$window', function('$scope','$window') {
  angular.element($window).bind("scroll", function(e) {
    var scroll = $(window).scrollTop();
    console.log(scroll);
    if(scroll>500 || scroll==undefined) {
      $scope.showUpArrow = false;
    } else {
      $scope.showUpArrow = true;
    }
  });
}]);