Question

我慢慢地获得AngularJS的支持 - 但是还在苦苦挣扎！

对于使用 d3.js 绘制的数字，我有一些工作指令。我正在尝试在全屏模式/灯箱中实现＆＃34;弹出窗口＆＃34;功能，使用ui.bootstrap.modal。

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

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

但是，当然，当它处于一个模态时，该指令的父元素没有宽度＆amp;在指令的链接功能被触发后，它的高度直到它打开并可见。

我试图在父元素的宽度和高度上添加$watch（基于this suggestion），但它对我不起作用 - 我猜猜链接函数只被触发一次。（注意：我对手表功能如何工作的了解仅限于this post - 但我认为这是解决方案可能存在的地方！）

或者我应该根据模式的opened或rendered承诺做些什么？如果是的话，在哪里？它不能在指令中（因为指令也存在于模态之外）。

最好的方法是什么？这是两个掠夺者：

（注意：图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。

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

1 个答案: