Question

我已经将网页标题实现为AngularJS指令。标题固定在浏览器窗口的顶部（ position：fixed ）。标题的高度根据其内部内容而变化。标题的内部内容由AngularJS的渲染引擎管理。每当标题的高度发生变化时，我都需要更新网页内容的上边距。（这就是固定标头的工作原理。）

我尝试使用 $ scope。$ watch 来查看标题的高度并更新内容的上边距。有时它可以工作，但有时我必须单击两次导航链接才能获得正确的边距大小。似乎在浏览器完全更新或呈现标题之前检测并处理了高度变化。

我的问题是：只要Angular调用的DOM操作完全完成，是否可以运行一些代码？或者还有其他方法可以使固定变量高度页面标题工作吗？

以下是我的HTML代码片段：

<my-header></my-header>
<div class="content">
    ...
</div>

这是指令控制器的片段：

function MyHeaderController($scope, $element) {
    $scope.$watch(getHeaderHeight, fixContentMargin);

    function getHeaderHeight() {
        return $element[0].offsetHeight;
    };

    function fixContentMargin(newValue) {
        $element.parent()[0].querySelector('.content').style.marginTop = newValue + 'px';
        return;
    };
}

修复了AngularJS中定位的可变高度页眉

0 个答案: