У меня возникли проблемы с поиском способа инициировать директиву после возврата данных. Я пытаюсь построить отчет, используя html-таблицы и ng-repeat. Объект отчета создается с использованием Factory. Фабричный метод возвращает объект отчета, а ng-repeat строит таблицу. Я нашел директиву DataTable, которая берет html и применяет плагин JQuery.
Проблема: если директива datatables вызывается до создания таблицы, происходит сбой. Мне нужно контролировать, когда директива вызывает функцию element.getTable(options)
.
Я нашел еще одну директиву, которая может определить, когда ng-repeat выполняется с помощью $last
, но есть ли способ использовать эту директиву ngRepeat для инициации директивы dataTables из контроллера?
HTML:
<!-- partials/reports/limbo.html -->
<div ng-visible="$root.ReportReady">
<table data-name="CheckedOutFiles_Report" class="report" my-table>
<thead>
<tr class="reportHeader" >
<th>Filename</th>
<th>File Url</th>
<th>Checked Out To</th>
<th>Modified</th>
</tr>
</thead>
<tbody>
<!-- new row for every file -->
<tr ng-repeat="file in ReportModel.report" on-finish-render>
<td>{{file.fileName}}</td>
<td>{{file.fileUrl}}</td>
<td>{{file.checkedTo}}</td>
<td>{{file.modified}}</td>
</tr>
</tbody>
</table>
</div>
Контроллер отчетов:
spApp.controller('limboReportCtrl',
function limboReportCtrl($scope,$q,UserService,GroupService, SiteService, ReportService){
$scope.ReportModel = {};
$scope.createReport = function (){
ReportService.CheckedOutFiles().then(function (data){
console.log(data);
$scope.ReportModel.report = data;
})
}
$scope.createReport();
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
//you also get the actual event object
//do stuff, execute functions -- whatever...
console.log('somethingsomething');
});
}
);
Директива для обработки функции обратного вызова при выполнении ng-repeat:
spApp.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
Директива DataTables:
spApp.directive('myTable', function ($rootScope, $timeout) {
return {
restrict: 'E, A, C',
link: function (scope, element, attrs, controller) {
var reportName = $(this).data('name');
//DATA TABLE OPTIONS
//THIS WORKS BUT RELIES ON A SET TIME TO CALL DATATABLES AND ISN'T DEPENDENT ON WHEN THE TABLE IS READY. IF CALLED BEFORE TABLE GENERATED, IT WILL NOT WORK
var timer = $timeout(function (){
console.log('calling dataTables');
var dTable = element.dataTable(scope.options);
new $.fn.dataTable.FixedColumns( dTable );
$rootScope.ReportReady = true;
},3000);
//BEFORE THE CODE BELOW, $TIMEOUT DESTROYED PERFORMANCE OF THE ENTIRE APPLICATION. FOLLOWING THIS BLOG POST, PERFORMANCE SIGNIFICANTLY IMPROVED http://tinyurl.com/naouvv7
timer.then(
function (){
console.log("Timer resolved ", Date.now());
},
function (){
console.log("Timer rejected ", Date.now());
}
);
scope.$on('$destroy',
function(e){
$timeout.cancel(timer);
}
)
}
}
});