Question

你好，请问如何在角度js滚动到div的顶部时显示警告，当用户滚动到底部时也是如此。实际上我知道如何使用if（this.scrollTop === 0）在jquery中实现这一点。但是我正在使用具有角度js的离子框架。所以当用户滚动到顶部并显示警报时，你可以告诉我如何获取事件。

这是我的傻瓜 http://plnkr.co/edit/8bqDi69oiBKTpDvCaOf6?p=preview

<body ng-controller="MyController">
<div style="width:90%;height:150px;border:1px solid red;overflow:auto;overflow-y: scroll">
<div ng-repeat="n in name">{{n.name}}</div>
</div>

Answer 1

Angular不会为您提供任何内容，您只需要在元素上绑定一个滚动事件。在我当前的项目中，我刚刚在我的控制器中创建了一个事件：

var container = angular.element(document);
container.on('scroll', function() {
    if (container.scrollTop() > 1000) {
        $('#scroll-top-button').addClass('show');
    } else {
        $('#scroll-top-button').removeClass('show');
    }
});
// in your case angular.element(document) should be your div instead of document

它确实表现得非常好（我希望滚动事件上的if花费一些资源但不是真的。）

Angular指令

简单的方法是定义一个指令来绑定一个滚动事件并查看位置。根据您的代码：

angular.module('ionicApp', ['ionic'])
  .directive("scrollable", function() {
    return function(scope, element, attrs) {
      var container = angular.element(element);
      container.bind("scroll", function(evt) {
          if (container[0].scrollTop <= 0) {
              alert('On the top of the world I\'m singing I\'m dancing.');
          }
          if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {
              alert('On the bottom of the world I\'m waiting.');
          }
      });
    };
  })
  .controller('MyController', function($scope, $element) {
    $scope.name = [{ ... }];
  });

然后在你的HTML中添加指令

<div scrollable style="width:90%;height:1...

我更新了一个适用于我的版本on your plunker (v5)，对于全球兼容性而言似乎非常强大。它的水平低;）

替代图书馆

如果您想要实现更深层次的功能，可以使用waypoint

等库

Waypoints是一个可以轻松执行功能的库每当你滚动到一个元素。 http://imakewebthings.com/waypoints/

它的效果非常好，非常轻，因为v3.0是免费的jQuery：D。我知道一些硬核前端设计师使用它而没有任何性能问题。

Answer 2

您必须使用指令，以便将元素连接到后端。

我创建了一个非常类似于sebastionbarbier的指令，没有绑定部分，但我猜使用链接与bind非常相似。

np.sum(Rxy, axis=0)

http://plnkr.co/edit/ra6HLvEsPBPHeNqVVI4c?p=preview

Answer 3

我并不反对其他答案，但你应该尽量不要在Angular中使用任何全局函数，例如： alert();你应该尝试注入依赖项。

相反，使用$window.alert，将$window注入您的指令。然后，您可以通过使用Jasmine的spyOn($window, "alert")单元测试行为。 E.g：

spyOn($window, "alert");
expect($window.alert).toHaveBeenCalled();

当用户在角度js中滚动到div顶部时如何显示警报？

3 个答案:

Angular指令

替代图书馆