AngularJS/ui-bootstrap.modal：在模態打開後獲取指令元素的尺寸

Question

我是緩慢得到AngularJS的掛鉤 - 但掙扎！

我有一些工作指令數字繪製使用d3.js。我正在嘗試使用ui.bootstrap.modal實現「全屏模式/燈箱彈出」功能。

爲了繪製圖形，指令函數需要知道最終元素的寬度和高度，我已經從指令的父元素的寬度和高度中獲取了寬度和高度（因爲指令元素本身似乎沒有尺寸爲預期），例如

<figure id="parent"> <!-- parent has a defined width & height --> 
    <figure2></figure2> <!-- my directive --> 
    <figcaption>Caption goes here!</figcaption> 
</figure> 

當然但是，當它在一個模式，該指令的父元素沒有寬度&高度，直到它的開放和可見，該指令的鏈接功能被炒魷魚後。

我試着把$watch放在父元素的寬度和高度上（基於this suggestion），但它不適用於我 - 我猜連接函數只會被觸發一次。 （注：我的手錶功能的工作是如何限制爲this post知識 - 但我認爲這是那裏的解決辦法可能是說謊！）

或者基於模式的opened或rendered承諾我應該做的事情？如果是這樣，在哪裏？它不能在指令中（因爲指令也存在於模態之外）。

這樣做的最好方法是什麼？這裏的兩位Plunkers：

• One which draws the figures using a constant height & width
• One where I've tried to implement the $watch.

（注：圖1不需要寬/高，但圖2那樣）

提前感謝！

獎金問題（救我稍後再回來！）：

• 有一種簡單的方法來重畫上一個窗口大小調整事件的數字？
• 有沒有一種簡單的方法可以讓一個figure-modal.html模板根據提供的變量/表達式動態地填充正確的指令（<figure1></figure1>或<figure2></figure2>）？

Answer 1

回到這個問題後，我花了一段時間（學習如何做角！），我發現了一個基於另一個答案鬆散的解決方案（我已經失去了）。

訣竅是設置兩個手錶：

scope.$watch (function() { 
    if (element.width() !== scope.dims.width || element.height() !== scope.dims.height) { 
    scope.dims = {'width': element.width(), 'height': element.height()}; 
    } 
}); 

scope.$watch ('dims', function (newVal, oldVal) { 
    if (newVal === oldVal) return; 
    alert('dimensions changed'); 
    draw(); // Call to function to redraw the graph 
}); 

第一$watch更新每個消化循環中的scope.dims對象。第二個$ watch在更新時觸發。

可能不是最好的代碼，但它的工作原理！

對於未來的讀者 - 讓我知道如果你需要看到一個工作Plunkr。