Watch for dom element in AngularJS

Question

I'm looking for a pure angularJS way to call a controller method once a particular dom element is rendered. I'm implementing the scenario of a back button tap, so I need to scroll to a particular element once it is rendered. I'm using http://mobileangularui.com/docs/#scrollable.

Update: how my controller looks like:

$scope.item_ready=function(){
    return document.getElementById($scope.item_dom_id).length;
};
$scope.$watch('item_ready', function(new_value, old_value, scope){
    //run once on page load, and angular.element() is empty as the element is not yet rendered
});

Thanks

Is the DOM element part of an ng-repeat or is it just on its own? — Thierry Blais, May 15 '15 at 17:07
Have you looked at http://stackoverflow.com/questions/21332671/angularjs-watch-dom-change? — Giliar Perez, May 15 '15 at 18:05
@GiliarPerez I saw that. I'm not sure how this code works, but what i first tried is, from controller I have a method plus a watch. Please see my update — atoo, May 15 '15 at 18:42

score 0 · Answer 1 · edited May 23 '17 at 12:34

0

Read this post Calling a function when ng-repeat has finished

But don't look at the accepted answer, use the 3rd answer down by @Josep by using a filter to iterate through all your repeat items and call the function once the $last property returns true.

However instead of using $emit, run your function...This way you don't have to rely on $watch. Have used it and works like a charm...

edited May 23 '17 at 12:34

Community

1
1

answered May 15 '15 at 18:46

Thierry Blais

2,848
22
41

score 0 · Accepted Answer · answered May 15 '15 at 18:49

One hack that you could do and I emphasize hack here but sometimes it's just what you need is watch the DOM for changes and execute a function when the DOM hasn't changed for 500ms which is accepted as a fair value to say that the DOM has loaded. A code for this would look like the following:

// HACK: run this when the dom hasn't changed for 500ms logic
var broadcast = function () {};

if (document.addEventListener) {

  document.addEventListener("DOMSubtreeModified", function (e) {
    //If less than 500 milliseconds have passed, the previous broadcast will be cleared.
    clearTimeout(broadcast)
    broadcast = $window.setTimeout(function () {
      //This will only fire after 500 ms have passed with no changes
      // run your code here
    }, 10)

  });
}

Watch for dom element in AngularJS

2 Answers2