Manipulate an element that is conditionally rendered

Question

I'm fixing a bug on some legacy Angular 1.5 code.

I have a template like this

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

I need to manipulate the div#child. I'm using $element.find() to get the child div. Unfortunately, it seems that code runs before the template/DOM has finished rendering -- due to the conditional rendering on the container, it doesn't find anything. If I remove the ng-if, it's able to find the element as expected.

Is there any way I can execute my DOM manipulation until after all the conditional rendering is done?

Thank you

Answer 1

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

Answer 2

If simple case you just do:

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

If that is not enough you'd better add some directive on that #child element.