javascript - Angular JS - 在 View 渲染之前获取指令中的元素高度

Question

我是 Angular 的新手，所以非常感谢任何帮助。我正在尝试根据屏幕大小(减去页眉和页脚)在页面加载、窗口大小调整和另一个自定义事件(当用户单击以展开内容时)垂直对齐 div。所以我为它写了一个指令，我不确定这是否是正确的方法。我需要获取指令中的元素高度才能使其正常工作。

只有 CSS，没有任何 JS，在我的情况下不会工作，标记是嵌套/复杂的..我尝试了不同的方法(内联 block /翻译/等..)

问题:

1. 最初尝试进入指令内部时，元素高度为 0(零)，我猜这是因为 View 尚未呈现。如果是这种情况，那当然是有道理的，但是我该如何解决这个问题，以便在 View 转换开始时我已经通过 JS 进行了所有必要的 CSS 更改？

2. 我如何“调用”指令，比方说，在我加载更多内容或任何其他 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();
            });
        }
    };
}]);

Answer 1

在 $timeout 调用中包装对 $scope.setHeight() 的调用。

本质上，$timeout 会在您的 DOM 加载后立即发生，因此这些值将准备好使用。