angularjs子指令元素选择

Question

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

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

而且app-footer指令有一个小div含量约50像素的高度。

<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 

    } 
}]); 

所以我不能得到页脚的高度。

Answer 1

您可能要根据页脚的高度计算main的边距/填充/高度。你可以做什么，是这样的（页脚高度可能会改变）：

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

}