0

I have this code in javascript

$scope.sample = function(){
    console.log(document.getElementById('foo'+modelId));
}

which returns false due to the HTML not yet complete rendering the page. See below:

<li ng-repeat="item in items" >
<input ng-model='foo'{{item.modelId}}
</li>

I want to avoid using timeout, is there a way to assure the HTML is completely rendered before executing the code.

user3770093
  • 315
  • 2
  • 11
  • 20

1 Answers1

1

I think that the best way is to listen to scope.$last event and than run any code you need.

Here is an example:

angular.module('myApp', [])
.directive('repeatFinished', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // Here we can see that all ng-repeat items rendered
            scope.$eval(attrs.repeatFinished);
        }
    }
});

And than on your html you simple add: 

<li ng-repeat="item in items"  repeat-finished="sample()">
//....
</li>
Dima Grossman
  • 2,800
  • 2
  • 21
  • 26
  • Hey thanks, I've searched similar problems to mine and they've also suggested listening to the last item. Thanks! – user3770093 Sep 30 '15 at 02:36
  • http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished this thread provides a better understanding. – user3770093 Sep 30 '15 at 05:15