問題描述:javascript
使用angularjs集成footable,經過ajax加載數據後,頁面分頁及樣式沒有刷新。php
現象:html
<table class="table m-b-none" ui-jq="footable" data-filter="#filter" data-page-size="5"> <thead> <tr> <th data-toggle="true">Name</th> <th data-hide="phone">Logo</th> <th data-hide="phone,tablet">Website</th> <th data-hide="phone,tablet" data-name="Friendly URL">URL</th> <th data-hide="all">External Parameter 1</th> <th data-hide="all">External Parameter 2</th> <th data-hide="all">Meta Keywords</th> <th data-hide="all">Meta Description</th> <th data-hide="all">Period</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="store in stores"> <td>{{store.name}}</td> <td><img ng-src="{{store.logo}}" /></td> <td>{{store.website}}</td> <td>{{store.friendly_url}}</td> <td>{{store.external_parameter1}}</td> <td>{{store.external_parameter2}}</td> <td>{{store.meta_keywords}}</td> <td>{{store.meta_description}}</td> <td>{{store.period}}</td> <td data-value="1"> <!--Edit Button--> <a type="button" class="btn btn-xs btn-default" ui-sref="app.store.edit({editId: store.id})"> <i class="fa fa-pencil"></i> </a> <!--Delete Button--> <a type="button" class="btn btn-xs btn-default" ng-click="deleteStore(store.id)"> <i class="fa fa-trash"></i> </a> </td> </tr> </tbody> <tfoot class="hide-if-no-paging"> <tr> <td colspan="10" class="text-center"> <ul class="pagination"></ul> </td> </tr> </tfoot> </table>
正常樣式應該如:java
但偶爾會出現這樣狀況:angularjs
<td>標籤及樣式均沒有渲染,分頁功能也丟失。web
angularjs相關代碼以下:ajax
app.controller('storesCtrl', ['$scope', '$http', function($scope, $http) { $scope.stores = {}; $http.get("http://MyApiUrl/store.php"). success(function(data){ $scope.stores = data; //$('.table').trigger('footable_redraw'); }); }]);
解決方案:app
success(function(data){ $scope.stores = data; $timeout(function(){ $('.table').trigger('footable_redraw'); }, 100); });
以上$timeout代碼段加入到controller後,問題解決。ide