AngularJS/ui-bootstrap.modal：打开modal后获取指令元素的尺寸

我正在慢慢掌握AngularJS的诀窍——但仍在挣扎

我有一些使用d3.js绘制图形的工作指令。我正在尝试使用在全屏模式/灯箱功能中实现弹出

为了绘制图形，指令函数需要知道最终元素的宽度和高度，我从指令的父元素的宽度和高度中获取，因为指令元素本身似乎没有预期的尺寸，例如

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

但当然，当它在模态中时，指令的父元素只有在指令的link函数被激发后打开并可见时才具有宽度和高度

我试着在父元素的宽度和高度上放置$watch，但是它对我不起作用-我猜link函数只触发了一次。注：我对手表功能工作原理的了解仅限于-但我认为这就是解决方案所在

或者我应该根据莫代尔的公开承诺或承诺做些什么？如果是，在哪里？它不能在指令中，因为指令也存在于模态之外

最好的方法是什么？这里有两个劫掠者：

注意：图1不需要宽度/高度，但图2需要

提前谢谢

额外的问题，以避免我稍后回来！：

有没有一种简单的方法可以在窗口调整事件中重新绘制图形？ 有没有一种简单的方法可以让一个figure-modal.html模板使用正确的指令或基于提供的变量/表达式动态填充自身？

---

经过一段时间的学习，回到这个问题上来！，我找到了一个松散的解决方案，它是基于另一个我后来丢失的答案

诀窍是设置两块手表：

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