CODEWITHSUNDEEP
jqueryhtmlangularjs
user4992124
user4992124

Reputation: 1594

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?

Upvotes: 3

Views: 99

Answers (1)

igorshmigor
igorshmigor

Reputation: 802

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

Upvotes: 1

Related Questions