I'm using datatable: https://l-lin.github.io/angular-datatables and bootstrap: https://angular-ui.github.io/bootstrap/
this what i try to achive: after add data using modal from bootstrap and save it, the datatable is reload (without reload current route).
Here is my 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);
})
};
}])
here is my datatable function:
function AdminMenuTableData($compile, $scope, $modal, DTOptionsBuilder, DTColumnBuilder, SweetAlert, AdminMenu, 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();
}
}
How can i call reloadData() function so i can refresh the datatable. I've tried to inject AdminenuTableData function but no luck. injector failed.
Any suggestion?