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

}