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 承诺做一些事情吗？如果有，在哪里？它不能在指令中（因为指令也存在于模式之外）。

最好的方法是什么？这是两个 Plunker：

• 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

一段时间后（学习如何做 Angular！）回到这个问题，我找到了一个基于另一个答案的松散解决方案（后来我失去了）。

诀窍是设置两个手表：

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，请告诉我。