How can I detect that ngShow DOM changes are done?

Question

I have a section of my website that gets shown when I user clicks on a particular row on a table:

<div ng-show="showDetails">
   <details item=selectedItem></details>
</div>

The directive contains a materialize form that has to be initialized with this for it to properly display:

$('select').material_select();

What I'd like to do is to have a function that is called when the ngShow DOM manipulation is complete that will call $('select').material_select(); to replace select input fields with the correct materialize settings.

Any idea how I can watch DOM changes?

Answer 1

This is a very very hacky way of doing what you want. Suppose you have an ngClick function which shows the form, in which you set the showDetails form, you can use the $timeout function which is called after angular finishes dirty checking the DOM. Dirty checking of the DOM is nothing but checking scope values at the end of the digest cycle. Angular internally checks for all scope values from its previous value and accordingly updates the model.

$scope.clickHandler = function() {
  $scope.showDetails = true;
  $timeout(function(){
    // ng if has just concluded
  });
}