Can you help me figure out the best way to $watch or bind the height position of an element? I have a scenario where I display three divs, one at a time in different tabs (using bootstrap). Each div has a different height, and my directive comes after these divs. My objective is to display it only when the div's height is greater than the current viewport height. Is there a way to achieve this without relying on scrolling since the initial position of my directive may vary without any scrolling involved?
Below is the code snippet of my directive:
(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);
I am looking for a way to hide it based on the height of its parent div, a specific element's height, or any other suggestions you may have...
Thank you