Angular JS - получить высоту элемента в директиве перед визуализацией представления

Question

Angular JS - получить высоту элемента в директиве перед визуализацией представления

0

Я новичок в угловой, поэтому любая помощь будет высоко оценена. Я пытаюсь вертикально выровнять div в соответствии с размером экрана (минус верхний и нижний колонтитул) при загрузке страницы, изменении размера окна и другом настраиваемом событии (когда пользователь нажимает, чтобы расходовать контент). поэтому я написал для него директиву, я не уверен, что это правильный подход. Мне нужно получить высоту элемента внутри директивы, чтобы она работала.

Просто CSS, без каких-либо JS, не будет работать в моем случае, разметка будет вложенной/сложной. Я пробовал разные методы (inline-block/translate/etc..)

Проблемы:

высота элемента равна 0 (ноль) при попытке проникнуть внутрь директивы вначале, я предполагаю, потому что представление еще не отобразилось. Если это так, то этот курс имеет смысл, но как мне обойти его, поэтому, когда начинается переход к просмотру, я уже сделал все необходимые изменения CSS через JS?
Как мне "называть" эту директиву, скажем, после загрузки большего количества контента или любых других манипуляций с DOM?

мой код:

app.directive('valign', ['$window', function ($window) {
    return {
        link: function ($scope, $element) {
            var window = angular.element($window);
            $scope.setHeight = function () {
                var contentHeight = window.height() - $('#header').outerHeight(true) - $('#footer').outerHeight(true);
                // Here I want to get the $element height so I can set the proper margin for it, for example
            };
            $scope.setHeight();
            window.bind('resize', function () {
                $scope.setHeight();
                $scope.$apply();
            });
        }
    };
}]);

arielmorry 01 июль 2015, в 11:42

Источник

Теги:

javascript

angularjs

css

3 ответа

Ещё вопросы

arielmorry · Answer 1 · 2015-07-02T06-14-00.000Z

Решено!

Я использовал предложение Andy Lewis & Sidharth Panwar и исказил мой вызов моей функции в $ timeout с 0ms, который гарантирует, что функция запускается после того, как DOM готов + я изменил разметку, поэтому valign-директива будет INSIDE и ng-view (ui-view в мой случай), что сделало изменения применимыми до того, как представление вступит в переход.

Итоговый код:

app.directive('valign', ['$window', '$timeout', function ($window, $timeout) {
    return {
        link: function ($scope, $element) {
            var window = angular.element($window);
            $scope.setHeight = function () {
                var contentHeight = window.height() - $('#header').outerHeight(true) - $('#footer').outerHeight(true);
                $element.css('margin-top',(contentHeight - $element.outerHeight(true)) /2);
            };
            $timeout($scope.setHeight, 0);
            window.bind('resize', function () {
                $scope.setHeight();
                $scope.$apply();
            });
        }
    };
}]);

и разметка:

<div  ui-view>
    <div valign></div>
</div>

Sidharth Panwar · Answer 2 · 2015-07-01T07-54-00.000Z

Вы можете воспользоваться $ timeout следующим образом:

app.directive('valign', ['$window', '$timeout', function ($window, $timeout) {
    return {
        link: function ($scope, $element) {
            var window = angular.element($window);
            $scope.setHeight = function () {
                var contentHeight = window.height() - $('#header').outerHeight(true) - $('#footer').outerHeight(true);
                // Here I want to get the $element height so I can set the proper margin for it, for example
            };
            $timeout($scope.setHeight, 500, true);
            window.bind('resize', function () {
                $scope.setHeight();
                $scope.$apply();
            });
        }
    };
}]);

В основном, мы пытаемся вызвать функцию setHeight после задержки 500 мс, в течение которой мы надеемся, что директива будет рендеринга. Мы можем увеличить/уменьшить время, исходя из индивидуальных требований.

Привет, это не работает - $ timeout ($ scope.setHeight, 0); Решение по тайм-ауту работает только после 800 мс, но это уже слишком поздно, и чем поле css создает «скачок» в контенте, поскольку оно происходит после начала перехода :(
Я бы посоветовал вам выполнить полную инициализацию / настройку в $ timeout. Если это уже сделано, перезапустите эту вещь. Конечно, я не знаю, что именно ты пытаешься сделать, поэтому не могу тебе сильно помочь :(

Andy Lewis · Answer 3 · 2015-07-01T06-59-00.000Z

Оберните свой вызов $ scope.setHeight() в $ timeout-вызове.

По сути, $ timeout без задержки будет происходить после загрузки DOM и поэтому значения будут готовы к использованию.

Привет, это не работает - $ timeout ($ scope.setHeight, 0); Решение по тайм-ауту работает только после 800 мс, но это уже слишком поздно, и чем поле css создает «скачок» в контенте, поскольку оно происходит после начала перехода :(