指令（リンク）内の要素の位置の変更（高さ）を監視/監視するにはどうすればよいですか？

Question

私は要素の高さ位置を見たり結び付けたりするのに最適な正しい方法を理解したいと思います。私は3つのdivを持っていて、別のタブで（ブートストラップを使って）時間ごとに1回示しています。各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を使うのです：

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