Angular JS - 在视图呈现之前，在指令中获取元素高度 [英] Angular JS - Get element height in directive before view render

问题描述

我对角度很新，所以任何帮助将高度赞赏。
我试图在页面加载，窗口调整大小和另一个自定义事件（当用户单击以支出内容时）根据屏幕尺寸（减去页眉和页脚）垂直对齐div。所以我为它写了一个指令，我不知道这是否是正确的方法。我需要得到的指令中的元素高度，以便它工作。

I'm pretty new to angular, so any help would be highly appreciated. I'm trying to vertical align a div according to screen size (minus the header and footer) on page load, window resize and another custom event (when the user clicks to expend content). so I wrote a directive for it, I'm not sure if this is the right approach. I need to get the element height inside the directive in order for it to work.

只要CSS，没有任何JS，不工作在我的情况下，标记是嵌套/ complex ..我尝试了不同的方法（inline-block / translate / etc ..）

Just CSS, without any JS, wont work in my case, the markup is to nested/complicated.. I tried different methods (inline-block/translate/etc..)

问题：

1. 元素的高度是0（零），当试图在指令内部，首先，我猜这是因为视图还没有渲染。如果是这样，那当然是有意义的，但是如何解决这个问题，所以当视图转换开始时，我已经通过JS实现了所有必要的CSS更改。

1. the element height is 0 (zero) when trying to get inside the directive at first, I'm guessing it's because the view hasn't render yet. If this is the case, that's off course make sense, but how do I get around it so when the view transition start I already made all the necessary CSS changes via JS?

如何在加载更多内容或任何其他DOM操作后调用指令？

How to I "call" the directive,lets say, after I load more content or any other DOM manipulation?

$ b b

我的代码到目前为止：

my code so far:

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

推荐答案

已解决！

我使用 Andy Lewis& Sidharth Panwar 建议，扭曲我的函数调用在$ timeout与0ms，以确保该函数运行后DOM准备好+我改变了标记，所以valign指令将INSIDE和ng-view（ui-view在我的

I used Andy Lewis & Sidharth Panwar suggestion and warped my my function call in $timeout with 0ms that insures that the function runs after DOM is ready + I changed the markup so the valign directive would be INSIDE and ng-view (ui-view in my case), that made the changes apply BEFORE the view enter transition.

最终代码为：

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>

这篇关于Angular JS - 在视图呈现之前，在指令中获取元素高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！