user4992124 user4992124 - 4 months ago 19
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

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">
<tbody class="list-view__body">
<tr ng-repeat="restaurant in restaurants">
<td>{{ }}</td>
<td>{{ restaurant.location }}</td>
<td>{{ restaurant.status }}</td>
<td>{{ restaurant.actions }}</td>

I have a jQuery function that checks how many rows there are inside
by running
. 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
, Angular and jQuery. What can I do about this?


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:

.controller('MyHappyController',['$timeout', function($timeout){
       name:'Burger land',
       location: 'Chicago',
       actions: 'go there'
       actions:'eat all the pizza!'