Enveloppe ag-grille dans une directive angulaire

Question

Je crée un assistant pour ajouter un nouveau rendez-vous dans notre application. La dernière page de l'assistant contient une section à onglets avec tous les conflits potentiels basés sur plusieurs critères. Chaque onglet est l'un des critères et utilise une grille angulaire pour afficher la liste des conflits. Comme chaque grille a les mêmes colonnes, mais contient des données différentes, je voudrais utiliser une directive pour envelopper la grille angulaire et ses options de grille dans le modèle, puis définir la rowData dans un autre attribut sur ma directive. J'ai actuellement ce qui suit pour ma 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(); 
     } 
    }; 
}]); 

Mon point de vue a le code suivant:

<!-- 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> 

Chaque fois que je lance cela, je me retrouve avec l'erreur suivante:

Error: [$injector:unpr] Unknown provider: angularGridProvider <- angularGrid <- inApptConflictDirective

Je ne suis pas sûr de savoir ce que je dois faire d'autre pour que la directive reconnaisse la grille de distribution. J'ai essayé d'utiliser $ compile aussi, mais je me retrouve avec la même erreur.

Y at-il autre chose à ajouter pour appeler un module tiers d'une directive? Cela a fonctionné lorsque j'ai utilisé la grille trois fois avec trois options de grille séparées.

Merci d'avance pour toute aide!

Answer 1

Il n'est pas nécessaire d'injecter 'angularGrid' dans votre directive (et il n'y a pas de tel élément injectable). Toutes les directives enregistrées sont disponibles pour tous les modèles dès que vous les enregistrez dans le module angulaire. La seule chose dont vous avez besoin est d'ajouter 'agGrid' à la dépendance de votre module angulaire avec quelque chose comme var module = angular.module("example", ["agGrid"]); alors vous devez utiliser ag-grid dans vos modèles et directives. Voir ag-grid documentation pour plus de détails.

Alors supprimez 'angularGrid' de la ligne app.directive('inApptConflict', ['angularGrid', function (angularGrid) { et vous devriez être prêt à partir.