Wrap ag-grid in an Angular Directive

Question

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!

Answer 1

There is no need to inject 'angularGrid' in your directive (and there is no such injectable element). All registered directives are available to all templates as soon as you register them in the angular module.

The only thing you need is to add 'agGrid' to the dependency of your angular module with something like var module = angular.module("example", ["agGrid"]); then you case use ag-grid in your templates and directives. See ag-grid documentation for more details.

So remove 'angularGrid' from line app.directive('inApptConflict', ['angularGrid', function (angularGrid) { and you should be good to go.