I am creating a wizard to add a new appointment in our application. The last page of the wizard contains a tabbed section with all potential conflicts based on several criteria. Each tab is one of the criteria and uses an Angular Grid to show the list of conflicts. Since each grid has the same columns, but contains different data, I would like to use a directive to wrap the Angular Grid and its grid options in the Template and then set the rowData in another attribute on my directive. I currently have the following for my directive:
'use strict';
app.directive('inApptConflict', ['angularGrid', function (angularGrid) {
return {
restrict: 'A',
transclude: true,
require: '?ngModel',
template: '<div class="ag-fresh conflictGrid" ag-grid="{{ conflictGridOptions }} ng-transclude"></div>',
controller: function ($scope) {
// function for displaying dates in grid
function datetimeCellRendererFunc(params) {...}
// column definitions
var conflictColumnDefs = [
{ colId: "Id", field: "Id", hide: true },
{ colId: "StartTime", field: "StartTime", headerName: "Start", width: 150, cellRenderer: datetimeCellRendererFunc } ...
];
// Grid options
$scope.conflictGridOptions = {
columnDefs: conflictColumnDefs,
rowData: null,
angularCompileRows: true,
enableColReseize: true
};
},
link: function ($scope, $elem, $attrs, ngModel) {
$scope.conflictGridOptions.rowData = ngModel;
$scope.conflictGridOptions.api.onNewRows();
}
};
}]);
My view has the following code:
<!-- Tab panes -->
<div role="tabpanel" class="tab-pane fade in active" id="conflicts1" data-ng-show="apptCtrl.conflicts1">
<div in-appt-conflict data-ng-model="apptCtrl.conflicts1"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="conflicts2" data-ng-show="apptCtrl.conflicts2">
<div in-appt-conflict data-ng-model="apptCtrl.conflicts2"></div>
</div>
Whenever I run this, I end up with the following error:
Error: [$injector:unpr] Unknown provider: angularGridProvider <- angularGrid <- inApptConflictDirective
I am not sure what else I need to do to get the directive to recognize ag-grid. I have tried using $compile, as well, but end up with the same error.
Is there something else that needs to be added to call a third party module from a directive? This did work when I used the grid three separate times with three separate grid options.
Thanks in advance for any help!