我正在使用
数据表: https://l-lin.github.io/angular-datatables
和bootstrap: https://angular-ui.github.io/bootstrap/
数据表: https://l-lin.github.io/angular-datatables
和bootstrap: https://angular-ui.github.io/bootstrap/
这就是我尝试实现的目标:在使用来自bootstrap的模态添加数据并保存之后,数据表将重新加载(无需重新加载当前路由).
这是我的modalCtrl:
.controller('addModalCtrl',['$scope','$modalInstance','$http','AdminMenu','ResultService',function ($scope,$modalInstance,$http,AdminMenu,ResultService) { $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; $scope.menu = {}; $scope.doSubmit = function () { var data = { name: $scope.menu.title,icon: $scope.menu.icon }; AdminMenu.save(data,function (response) { $scope.menu = {}; ResultService(response); $modalInstance.dismiss('cancel'); },function (response) { ResultService(response.data); }) }; }])
这是我的数据表功能:
function AdminMenuTableData($compile,$scope,$modal,DTOptionsBuilder,DTColumnBuilder,SweetAlert,ResultService,APIROOT) { $scope.dtOptions = DTOptionsBuilder.fromSource(APIROOT + 'admin-menus') .withOption('order',[0,"asc"]) .withOption('createdRow',function (row,data,dataIndex) { // Recompiling so we can bind Angular directive to the DT $compile(angular.element(row).contents())($scope); }); $scope.dtColumns = [ DTColumnBuilder.newColumn('id','ID').withOption('searchable',false),DTColumnBuilder.newColumn('name','Name'),DTColumnBuilder.newColumn('','Actions').renderWith(function (data,type,full,Meta) { return '<a class="btn btn-default btn-xs" ng-click=edit(' + full.id + ')><i class="fa fa-pencil"></i></a> ' + '<a class="btn btn-danger btn-xs" ng-click=delete(' + full.id + ')><i class="fa fa-trash"></i></a>'; }).notSortable() ]; $scope.dtInstance = {}; function reloadData() { $scope.dtInstance.reloadData(); }
}
我如何调用reloadData()函数,以便我可以刷新数据表.我试图注入AdminenuTableData函数,但没有运气.注射器失败.
有什么建议吗?
解决方法
请改用
rerender()
.它破坏了表并重新初始化它,包括重新加载AJAX源:
$scope.reloadData = function() { $scope.dtInstance.rerender(); }