Question

如何观察（每个元素的）偏移顶部位置，如果到顶部屏幕边界的距离低于100像素，我需要隐藏此div。（每个div都可以在页面上移动）。请帮助编写Angular指令。

我无法观察每个元素的顶部偏移。

var app = angular.module('app', []);

app.app.directive('blah', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.show();
      scope.$watch(function() {
        return element.offset().top > 120
      }, function(outOfBorder) {
        if (outOfBorder) {
          element.hide()
          console.log(outOfBorder)
        } else {
          element.show()
          console.log(outOfBorder)
        }
      });
    }
  }
});

.all {
height: 100px;
width: 300px;
 border:1px solid;
    overflow: scroll;
}
.elements {
height: 30px;
width: 300px;
 border:1px solid red;
float: left;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="all" ng-app="app">
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
<div class="elements" blah></div>
</div>

Answer 1

您只需添加一个具有功能的观察者（未测试+可能需要重命名）：

angular.module('blah').directive('blah', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      scope.$watch(function() {
        return element.offset().top < 100
      }, function(outOfBorder) {
        if (outOfBorder) {
          element.hide()
        } else {
          element.show()
        }
      });
    }
  }
});

您的代码无效的原因是在$watch执行之前评估传递给$watch的值。因此，您可以在执行链接时观察元素的顶部偏移 - 这是一个常数。

编辑：

如果你的元素没有绝对定位，调用hide会导致所有剩余元素向上移动，最终会隐藏所有元素。在这种情况下，使用element.addClass('invisible')和element.removeClass('invisible')而不是隐藏和显示和定义css类为：

.invisible { visibility: hidden; }

更改的可见性不会影响其他元素位置。

AngularJS如何观察元素的偏移顶部位置？

1 个答案: