I'm using BootGrid Data table and JSON file as my data source for the table.
Service
.service('datatableService', ['$resource', function($resource){
this.getDatatable = function(id, email, date) {
var datatableList = $resource("data/data-table.json");
return datatableList.get ({
id: id,
email: email,
date: date
})
}
}])
Controller
.controller('datatableCtrl', function($scope, datatableService){
//Get Data Table Data
$scope.id = datatableService.id;
$scope.email = datatableService.email;
$scope.date = datatableService.date;
$scope.dtResult = datatableService.getDatatable($scope.id, $scope.email, $scope.date);
})
Directive
.directive('bootgrid', ['$timeout', function($timeout){
return {
restrict: 'A',
link: function(scope, element, attr){
$('#data-table-basic').bootgrid({
css: {
icon: 'md icon',
iconColumns: 'md-view-module',
iconDown: 'md-expand-more',
iconRefresh: 'md-refresh',
iconUp: 'md-expand-less'
}
});
}
}
}])
HTML
<div class="table-responsive" data-ng-controller="datatableCtrl">
<table id="data-table-basic" class="table table-striped" data-bootgrid>
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="sender">Sender</th>
<th data-column-id="received" data-order="desc">Received</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="w in dtResult.list">
<td>{{ w.id }}</td>
<td>{{ w.email }}</td>
<td>{{ w.date }}</td>
</tr>
</tbody>
</table>
</div>
When I run this, I'm getting no data inside <tbody> but when I remove the directive, I can see all the JSON data are rendered inside the table. I want both ng-repeat and and directive works together. I tried to set the priority in directive as,
...
return {
restrict: 'A',
priority: 1001,
...
But no luck. http://plnkr.co/edit/rWCVXTjxOGZ49CeyIn9d?p=preview
Please help me fix this. I would appropriate if you could fix the above pen.
Regards
Priority setting will not help here because it is used to regulate order of compilation of directives defined on the same element.
You can delay bootgrid directive initialization until very next digest cycle using $timeout service. You will also need to watch for data object changes since you are loading it with AJAX.
app.directive('bootgrid', function($timeout) {
return {
link: function(scope, element, attr) {
scope.$watch(attr.bootgrid + '.length', function(newVal, oldVal) {
if (newVal !== oldVal && newVal) {
$timeout(function() {
element.bootgrid({
css: {
icon: 'md icon',
iconColumns: 'md-view-module',
iconDown: 'md-expand-more',
iconRefresh: 'md-refresh',
iconUp: 'md-expand-less'
}
});
});
}
});
}
}
});