3

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?

user4992124
  • 1,574
  • 1
  • 17
  • 35
  • 1
    Instead jquery function to resize the buttons based on device, use css to resize. If you cant do it, Try creating angular custom directive and resize buttons. – Laxmikant Dange Aug 26 '15 at 11:30
  • 1
    I don't have an answer for your problem, but to me it looks like this code is making your website responsive. Try looking into [Bootstrap UI](https://angular-ui.github.io/bootstrap/). It's Bootstrap for Angularjs. It eliminates the use of JQuery – Emiel Steerneman Aug 26 '15 at 11:30
  • +1 for the name alone I lold, check out this detailed post about angular and jquery and why you shouldn't really use them together. [link to post](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542#15012542) – Joe Lloyd Aug 26 '15 at 11:32
  • If you are not using any filters, then you can easily count the elemnts as `restaurants.length` – Tushar Gupta Aug 26 '15 at 11:34
  • This is the view, where is your controller/directives? you should post where do you want it. Its not very hard to find. – Jai Aug 26 '15 at 11:38

1 Answers1

1

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

igorshmigor
  • 792
  • 4
  • 10