Я хочу создать директиву, которая применяется к элементам, чтобы установить их максимальную высоту, равную высоте окна минус расстояние от верхней части элемента до верхней части окна.
я пробовал вот так
.directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function() {
return { 'h': w.height() };
};
scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) {
//get header height including margins
var headerHeight = $('.page-header').outerHeight(true);
scope.windowHeight = newValue.h;
scope.style = function() {
return {
'height': (scope.windowHeight - headerHeight) + 'px',
'max-height': (scope.windowHeight - headerHeight) + 'px'
};
};
}, true);
w.bind('resize', function() {
scope.$apply();
});
}
})
Но мне пришлось бы добавить var для каждого элемента, который выше элемента, высоту которого я хочу установить. Поэтому я считаю, что с помощью
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);
было бы лучше, поскольку он выполняет все измерения относительно элемента, его настройки, но как мне получить доступ к этому элементу из директивы без добавления каких-либо дополнительных классов или идентификаторов?
Также мне нужно создать изолированную область, чтобы я мог использовать ее более одного раза на одной странице?
Моя цель состоит в том, чтобы в основном иметь элемент тела моего веб-приложения, равный высоте окна, и любые содержащие div, которые выше этой высоты, имеют полосы прокрутки.
