Javascript 如何观察/监控指令（链接）中元素的位置变化（高度）？

我想了解观察或绑定元素高度位置的最佳正确方法。我有三个div，每次在不同的选项卡中显示一次（使用bootstrap）。每个div都有不同的高度，my component（指令）位于div之后。我的目标是只有当div高于当前的vieport高度时才显示它。有可能吗？请注意，我的指令在第一次可视化时可能处于不同的位置，因此不需要滚动，因此观看或绑定滚动对我来说不起作用

这是我的指令代码：

(function(angular) {
  var app = angular.module('pi.core');
  app.directive('piGoUp', [
    '$location',
    '$window',
    '$document',
    function($location, $window, $document) {
      return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        scope: {
          classes: '@',
          image: '@',
          idElement: '@'
        },
        link: function(scope, element, attrs) {
          console.log('goUp', element);

          if (!scope.image) scope.image = 'go-up.svg';

          scope.height = $window.innerHeight;

          angular.element($window).bind('resize', function() {
            scope.height = $window.innerHeight;
            console.log(scope.height);
            console.log($window);
            scope.$digest();
          });
        },
        controller: function($scope, $location, $anchorScroll) {
          $scope.goTo = function(idelement) {
            $location.hash(idelement);
            $anchorScroll();
          };
        },
        template:
          '<div class="pi-go-up {{classes}}"><div class="pi-go-up-text" ng-transclude></div><div><img src="{{image}}" ng-click="goTo(idElement)"></div></div>'
      };
    }
  ]);
})(angular);

（函数（角度）{
var app=角度模块（'pi.core'）；
应用指令（“piGoUp”[
“$location”，
“$window”，
“$document”，
函数（$location、$window、$document）{
返回{
限制：“AE”，
替换：正确，
是的，
范围：{
类别：“@”，
图像：“@”，
元素：'@'
},
链接：函数（范围、元素、属性）{
console.log（'goUp'，元素）；
如果（！scope.image）scope.image='go up.svg'；
scope.height=$window.innerHeight；
angular.element（$window.bind（'resize'，function（））{
scope.height=$window.innerHeight；
控制台.日志（范围.高度）；
console.log（$window）；
范围。$digest（）；
});
},
控制器：功能（$scope、$location、$anchorScroll）{
$scope.goTo=函数（idelement）{
$location.hash（idelement）；
$anchorScroll（）；
};
},
模板：
''
};
}
]);
})（角度）；

我想根据它的父div高度、元素高度或其他解决方案隐藏它

---

感谢使用addEventListener，而不是使用bind：

link: function(scope, element) {
  $window.addEventListener('resize', function() {

    // Do what you need to do here; check parent size versus viewport
    // or element size etc;
  }, false);
}

---

我的元素之前的div可以在不调整窗口大小的情况下更改高度，因此这对我不起作用。。。