将Ag-grid包装在Angular指令中 [英] Wrap ag-grid in an Angular Directive

问题描述

我正在创建一个向导以在我们的应用程序中添加新约会。向导的最后一页包含一个选项卡式部分，其中包含基于多个条件的所有潜在冲突。每个选项卡都是条件之一，并使用角度网格显示冲突列表。由于每个网格具有相同的列，但包含不同的数据，因此我想使用一条指令将Angular Grid及其网格选项包装在Template中，然后在我的指令的另一个属性中设置rowData。目前，我的指令中包含以下内容：

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:

错误：[$ injector：unpr]未知提供程序：angularGridProvider<-angularGrid<-inApptConflictDirective

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

我不确定我还需要做什么来使指令识别ag-grid。我也尝试过使用$ compile，但最终遇到相同的错误。

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.

在此先感谢您的帮助！

推荐答案

没有需要在指令中注入 angularGrid（并且没有此类可注入元素）。
一旦将它们注册到angular模块中，所有已注册的指令都可用于所有模板。

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.

您唯一需要做的就是将'agGrid'添加到与
var module = angular.module（ example，[ agGrid]）; 的角度模块的依赖关系，那么您使用ag-模板和指令中的网格。
有关更多详细信息，请参见 ag-grid文档。

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.

因此从 app.directive（'inApptConflict'，['angularGrid'，function（angularGrid）{ $ c>，您应该会很好。

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

这篇关于将Ag-grid包装在Angular指令中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！