Handling DOM element with dynamically generated id

Question

I have a simple Angularjs app with a controller containing a scope list of strings called id:

angular.module('app', [])
.controller('appCtrl', ['$scope', '$timeout',
  function($scope, $timeout) {
    $scope.ids = ['id1', 'id2'];
  }]);

In the html partial an ngrepeat iterates over ids and add this ids to a list of divs:

<div ng-app="app">
<div ng-controller="appCtrl">

<div ng-repeat="id in ids" ng-attr-id="{{id}}">
  div-{{id}}
  </div>

  </div>
</div>

These divs can be selected with angular.element in the controller only when it is included in a $timeout:

$timeout(function(){
 console.log('with timeout, element found');
 console.log(angular.element('#'+$scope.ids[0]));
});

console.log('no timeout, element not found');
console.log(angular.element('#'+$scope.ids[0]));

Here is a working example: https://codepen.io/neptune01/pen/zjqGzO

What exactly causes this asynchronous flow? Why do I need timeout to select the elements?

I'm trying to get rid of timeouts where possible. Is there a better way to do this element selection, without timeout eventually?

What use case is this, why do you need the elements? I have a feeling Angular is being misused here. — Giovani Vercauteren, Apr 24 '18 at 07:43
@GiovaniVercauteren I just want to read some properties like offsetHeight and offsetWidth without doing any dom manipulation. — neptune, Apr 24 '18 at 07:46
Maybe this can help you https://stackoverflow.com/a/15208347/3085279 — Tan Duong, Apr 24 '18 at 07:47
@neptune your question is very unclear. Add specific details — Vikasdeep Singh, Apr 24 '18 at 07:47
Can't use instead of `ng-attr-id="{{id}}"` this `id="{{id}}"`? — Saeed, Apr 24 '18 at 07:56
Ok, I'm searching for your problem. but is there any reason you use that?? — Saeed, Apr 24 '18 at 08:03
@Saeed.At I read that using id with interpolation can lead to bugs in some cases. Anyway I'm fine using a simple id too in my case. — neptune, Apr 24 '18 at 08:05

score 2 · Accepted Answer · answered Apr 24 '18 at 08:46

As I heard and read, it is a problem with AngularJs. The controller codes, execute before DOM complete, so without $timeout, there is no id '#'+$scope.ids[0] to select. You must use $timeout to select and use that.

For more information search and read about digest cycle of angularjs.

score 1 · Answer 2 · answered Apr 24 '18 at 08:56

@Saeed.At already pointed in the right direction.

It has something to do with AngularJS digest cycles. ng-repeat, ng-include and couple of other directives as well causing their rendering to be queued up and rendered in the following digest cycle. So for example

Contoller & Template rendering
ng-repeat rendering

Now you already see that trying to access ng-repeat items directly at start won't work since they will only be rendered one cycle later.

The $timeout basically does the same. If you don't provide a timeout parameter it will be queued up after the next digest cycle. So the chain will look sth like this

Contoller & Template rendering
ng-repeat rendering
$timeout function

Also important to note that if your ng-repeat contains other ng-includes or certain directives they will queue up themselves as well, so it could be that a single $timeout won't be enough. For this cases you'd have to take a different approach

Handling DOM element with dynamically generated id

2 Answers2