Question

我想了解$ watch或绑定元素高度位置的最佳方法。我有三个div，每次在不同的标签中显示一次（使用bootstrap）。每个div都有不同的高度，我的组件（指令）位于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);

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

由于

Answer 1

使用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);
}

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

1 个答案: