AngularJS子指令元素选择

angularjs sub directive element selection

本文关键字：选择 元素 指令 AngularJS      更新时间：2023-09-26

我有一个这样的嵌套指令。

<main>
 <app-header></app-header>
 <app-footer></app-footer>
</main>

app-footer指令有一个大约 50px 高度的小div内容。

<div class="footer"></div

所以我想在指令链接功能中获得页脚的高度main。

angular.module("app").directive("main", [function () {
    return {
        "restrict": "E",
        "transclude": true,
        "template": "<h1>hello</h1><div ng-transclude></div>",
        "link": link
    };
    function link(scope, element) {
        var footerHeight1 = $(".footer").height() || 0;  // returns 0
        var footerHeight2 = element.find('.footer');  // returns prevObject
    }
}]);

所以我无法获得页脚的高度。

您可能会根据

页脚的高度计算主的边距/填充/高度。您可以为此做的是这样的（页脚高度可能会随时间变化）：

function link(scope, element) {
    var footer = element.find(".footer");
    scope.$watch(function() {
        return footer.height();
    }, function(value) {
        // do something with main, here you know the height of the footer
        // footerheight = value
    });
}
相关文章：