user4992124 user4992124 - 1 month ago 5
HTML Question

Angular and jQuery got in a fight

Recently I decided to switch to AngularJS with my webapp. I've got so much legacy jQuery code though, so ideally I'd like to use them side by side. All went fine, but yesterday the two of them got in a fight.

I have an

ng-repeat
in my application, but on this list there's a jQuery script that resizes all the buttons to a certain size based on the device and browser.

This is the html:

<div class="list-wrapper">
<table>
<thead>
<tr>
<th>Restaurant</th>
<th>Location</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="list-view__body">
<tr ng-repeat="restaurant in restaurants">
<td>{{ restaurant.name }}</td>
<td>{{ restaurant.location }}</td>
<td>{{ restaurant.status }}</td>
<td>{{ restaurant.actions }}</td>
</tr>
</tbody>
</table>
</div>


I have a jQuery function that checks how many rows there are inside
list-view__body
by running
$(element).length
. That keeps returning 0 though and so the buttons aren't being resized. I've tried setting a delay on this, but it's still returning 0. Now, I understand that this has something to do with the
DOM
, Angular and jQuery. What can I do about this?

Answer

Since we don't see your code I can only guess. I assume that this happens because your jQuery function gets called before AngularJS has finished its digest cycle. When that happens the ng-repeat hasn't done its work yet and the length returns zero. What you can do is to move the call to your jQuery function into your Angular controller and wrap it with a $timeout, like so:

angular.module('myHappyApp',[])
.controller('MyHappyController',['$timeout', function($timeout){
    this.restaurants=[
     {
       name:'Burger land',
       location: 'Chicago',
       status:'awesome',
       actions: 'go there'
     },
     {
       name:'Pizzamania',
       location:'Shanghai',
       status:'wicked',
       actions:'eat all the pizza!'
     }
    ];
    $timeout(function(){
          myHappyJqueryFunction();
    });
 }]);

JSBin: http://jsbin.com/latobi/edit?html,js,output

Comments