Angular和jQuery陷入了战斗(Angular and jQuery got in a fight)

最近我决定用我的webapp切换到AngularJS。我有很多遗留的jQuery代码，所以理想情况下我想并排使用它们。一切都很顺利，但昨天他们两人参加了比赛。

我的应用程序中有一个ng-repeat ，但是在这个列表中有一个jQuery脚本，可以根据设备和浏览器将所有按钮的大小调整为一定的大小。

这是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>

我有一个jQuery函数，通过运行$(element).length来检查list-view__body有多少行。这仍然保持返回0，所以按钮没有调整大小。我已经尝试在此设置延迟，但它仍然返回0.现在，我知道这与DOM ，Angular和jQuery有关。我该怎么办？

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?

最满意答案

由于我们没有看到您的代码，我只能猜测。我认为这是因为你的jQuery函数在AngularJS完成其摘要周期之前被调用。当发生这种情况时，ng-repeat尚未完成其工作，并且长度返回零。你可以做的是将调用你的jQuery函数移动到你的Angular控制器并用$ timeout包装它，如下所示：

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

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

更多推荐