2

I need to get to dom element that created in ng repeat i have this code and i dont understand why i cant get the element.

<div></div>
<ul>
      <li ng-repeat="data in data"">
        {{data}}
      </li>
    </ul>
    <script>
      var thirdListItem = $('ul').find('li').first().text();
        $('div').html(thirdListItem);
    </script>

here is plunker http://plnkr.co/edit/91S2esBo0uHzQHyEBuvj?p=preview

Improve this question
3
  • Why do you want to? It's usually a bad idea to mix jQuery and Angular like this. Commented Oct 13, 2014 at 16:43
  • 1
    when your script is executed the elements are not yet created.. because it is created as part of the digest cycle... you will have to use a custom directive to do it Commented Oct 13, 2014 at 16:43
  • This is an example. because lets say i need dynamically get the height or width of element before it render in the html, how can i get this value? Commented Oct 13, 2014 at 16:49

2 Answers 2

Reset to default
2

Not a nice idea to use AngularJS and jQuery together. Btw, try this quick&dirty solution:

  $(function(){
      var thirdListItem = $('ul').find('li').first().text();
      $('div').html(thirdListItem);
  });

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

As somebody already said, the best practice would be to create a custom directive.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thats work fine. if you say its bad idea, what is the angular way?
as written in the answer, you should take a look to directives. I know it's attractive to mix up jQuery because you maybe know it already, but it's not clean code nor the best practice and it could lead to unexpected result and harder maintainance/debug
OK. but thats my question. i know how to write directives. I need a lead to accomplish something like what i wrote above.
From your questions, it's not really clear what you're asking. You can access elements after rendering using a directive that checks when the ng-repeat is over, and then operates on elements. Start from here: plnkr.co/edit/AQcfmUphHqBZ2phyB3X9?p=preview
1

For your particular case try this solution: It uses ng-init to pass the index value of the list item to a function which uses that index to return the DOM element using jQuery. Output is console.

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

  <ul>
    <li ng-repeat="data in data" ng-init="find($index +1)">
      {{data}}
    </li>
  </ul>

$scope.find = function(i){
       $ele= $('li:nth-child(' + i +')');
       console.log($ele);
  }
Improve this answer

6 Comments

Guys im sorry for the misunderstood, but what im trying to accomplish is something like what i wrote in the third comment above.
Updated plunker to address your issue
OK I will to this now
It seems like this (size of your element) is really something that you shouldnt have to worry about given the proper CSS in the first place.
When directive is active this is happen after document.ready event?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.