将 ag-grid 包裹在 Angular 指令中

Posted 2023-03-28

【中文标题】将 ag-grid 包裹在 Angular 指令中

【英文标题】：Wrap ag-grid in an Angular Directive

【发布时间】：2016-01-23 13:45:40

【问题描述】：

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

'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();
        
    ;
]);

我的视图有以下代码：

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

每当我运行它时，我都会遇到以下错误：

错误：[$injector:unpr] 未知提供者：angularGridProvider

我不确定我还需要做什么才能让指令识别 ag-grid。我也尝试过使用 $compile，但最终还是出现了同样的错误。

是否需要添加其他内容才能从指令调用第三方模块？当我使用三个单独的网格选项三次单独使用网格时，这确实有效。

提前感谢您的帮助！

【参考方案1】：

没有必要在你的指令中注入“angularGrid”（也没有这样的可注入元素）。 一旦您在 Angular 模块中注册了所有已注册的指令，所有模板都可以使用它们。

您唯一需要的是将“agGrid”添加到您的角度模块的依赖项中，例如 var module = angular.module("example", ["agGrid"]); 然后你在你的模板和指令中使用 ag-grid。 详情请见ag-grid documentation。

所以从app.directive('inApptConflict', ['angularGrid', function (angularGrid) 行中删除'angularGrid'，你应该很高兴。

【讨论】：

谢谢。我想这意味着您不能在自定义指令中使用 ag-grid。太遗憾了，因为这意味着我必须将它写出 3 倍（也需要更多的下载量），而不是仅仅创建一个可重用的小部件。

不，我不是这个意思。我的意思是你不需要将 angularGrid 注入到你的 inApptConflict 指令中。