javascript - Angular - 观察影响子 DOM 元素可见性的祖先中的 ngShow/ngHide 变化

Question

我是一个 DOM 元素(绑定(bind)到一个表)。我是基于 ngShow 的选项卡控件的下游子控件。我住在第二个选项卡上。当页面渲染时，我存在，但我还没有真正可见。

当我通过我的非直接父级变得可见时，当它的 ngShow 表达式变为 true 时，我希望以某种方式收到通知。

这可能吗？我想避免在自己之外的任何地方添加代码 - 例如，我不想在某个地方的选项卡更改事件中添加代码。我宁愿有一种注册方法，通过 ngShow/ngHide 绑定(bind)的最外层容器的更改来查明我的可见性何时发生变化。这可以吗？

Answer 1

由于指令中有可用范围，因此您可以使用它来监视可见性的变化:

scope.$watch(function() { return element.is(':visible') }, function() {
  // Do whatever should happen when the visibility changes
});

这可以避免轮询可见性，这可能会影响性能。当然，这假设范围是由导致可见性改变的任何原因应用的。我在自己的指令中尝试过，但与 ngShow/ngHide 无关。

信用到期的信用:这最初是在这里提出的(不是我提出的):
https://groups.google.com/d/msg/angular/w7Gxa5M_17M/koYCZnsobawJ

编辑2014-02-24
几个月后重新审视这个答案，我注意到这有效，但会大大减慢你的消化周期。最佳实践是不要使用诸如此类的昂贵函数来进行脏检查。谨慎使用!