Angular cannot get element by class that inside ng-repeat div

Question

I want to grab an element by his class with JQuery, but for some reason that's not working. The length of the JQuery object is 0, and that's happening only, if I want the class that is inside the element with ng-repeat.

index.html

<body ng-controller="MainCtrl">
  <div user>
    <div ng-repeat="user in users" class="user">
      <p>{{user.name}}</p>
    </div>
  </div>
</body>

app.js

app.controller('MainCtrl', function($scope) {
  $scope.users = [{name: 'name1'}, {name: 'name2'}];
});

.directive('user', function() {
  return function(scope, ele) {

    console.log('Im here');

    console.log($('.user')); // this is not working the length is 0
  }
})

plunker: http://plnkr.co/edit/MYYoam0XFUrKIB4f2zOT

What do you want to do with the element, as the 'angular way' would be to use Angular, not jQuery, to manipulate the element too? — Simon H, Nov 18 '14 at 20:01
Do you expect this http://plnkr.co/edit/S0rcKD0Zmx1tjBxfpOnQ?p=preview — Asik, Nov 18 '14 at 20:08
Why don't you just use your `ele` parameter? i.e. `console.log($(ele));` if you need to wrap it in jquery, but if you include jquery before angular it will use it and you can just do `console.log(ele.length);` — Jason Goemaat, Nov 18 '14 at 22:11

score 1 · Accepted Answer · answered Nov 18 '14 at 20:09

1

It's returning length of 0 cause the divs aren't rendered onto the DOM yet. $timeout is one workaround, but I would use:

angular.element(document).ready(function () {
    console.log($('.user').length)
});

answered Nov 18 '14 at 20:09

elzi

5,442
7
37
61

It's far better using $last in the link block http://stackoverflow.com/a/26692039/356380 – Whisher Nov 18 '14 at 20:16

Coldstar · Answer 2 · 2014-11-18T20:26:21.963

Your directive markup is primitive. You should use directives like shown below and you wont have to use a $timeout hack. The link() function is used to manipulate the DOM after it has loaded.

angular.module('project').directive('user', [
    function () {
        return {
            templateUrl: 'views/DirectiveSample.html',
            restrict: 'A',
            scope: {
                users: '='
            },
            link: function postLink(scope, element, attrs) {
                console.log($('.user'));
            }
        };
    }
]);

score -1 · Answer 3 · answered Nov 18 '14 at 20:06

-1

One way to accomplish this is to wrap your query in a $timeout which will cause the query to run on the next digest loop:

.directive('user', function($timeout) {
      return function(scope, ele) {

        console.log('Im here');

        $timeout(function () {
             console.log($('.user')); 
        });


      }
    })

answered Nov 18 '14 at 20:06

sma

9,449
8
51
80

But why this is happening only in the ng-repeat div? – Bazinga Nov 18 '14 at 20:09

score -1 · Answer 4 · answered Nov 18 '14 at 20:09

Use timeout

.directive('user', function($timeout) {
  return function(scope, ele) {

    console.log('Im here');

    $timeout(function() {
      console.log(ele[0].offsetHeight); 
      },0);// this is not working the length is 0
  }
})

http://plnkr.co/edit/cCM8q1mVABzZSBccufvC?p=preview

Angular cannot get element by class that inside ng-repeat div

4 Answers4