操作有条件渲染的元素

Question

我正在修复一些遗留 Angular 1.5 代码的错误。

我有这样的模板

<div id="container" ng-if="ctrl.show_container">
  <div id="child"></div>
</div>

我需要操纵 div#child。我正在使用 $element.find() 来获取 child div。不幸的是，代码似乎在 template/DOM 完成渲染之前运行——由于容器上的条件渲染，它没有找到任何东西。如果我删除 ng-if，它就能按预期找到元素。

有什么方法可以执行我的 DOM 操作，直到完成所有条件渲染？

谢谢

Answer 1

如果是简单的情况你就这样做：

ctrl.show_container = true;
$timeout(() => $element.find(...))

如果这还不够，您最好在 #child 元素上添加一些指令。

Answer 2

  scope.$watch('$viewContentLoaded', functionToManipulateDom)

Manipulate an element that is conditionally rendered