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

问题描述

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

'use strict';app.directive('inApptConflict', ['angularGrid', function (angularGrid) {返回 {限制:'A'，转置:真实，要求:'?ngModel',模板:'<div class="ag-fresh conflictGrid" ag-grid="{{ conflictGridOptions }} ng-transclude"></div>',控制器:函数($scope){//在网格中显示日期的函数函数 datetimeCellRendererFunc(params) {...}//列定义var conflictColumnDefs = [{ colId: "Id", field: "Id", hide: true },{ colId: "StartTime", field: "StartTime", headerName: "Start", width: 150, cellRenderer: datetimeCellRendererFunc } ...];//网格选项$scope.conflictGridOptions = {columnDefs:冲突列定义，行数据:空，angularCompileRows: 真,enableColReseize: 真};},链接:函数($scope，$elem，$attrs，ngModel){$scope.conflictGridOptions.rowData = ngModel;$scope.conflictGridOptions.api.onNewRows();}};}]);

我的视图有以下代码:

<div role="tabpanel" class="tab-pane淡入活动" id="conflicts1" data-ng-show="apptCtrl.conflicts1"><div in-appt-conflict data-ng-model="apptCtrl.conflicts1"></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>

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

<块引用>

错误:[$injector:unpr] 未知提供者:angularGridProvider <- angularGrid <- inApptConflictDirective

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

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

在此先感谢您的帮助！

解决方案

没有必要在你的指令中注入 'angularGrid'(并且没有这样的可注入元素).一旦您在 angular 模块中注册了所有注册的指令，所有模板都可以使用它们.

您唯一需要做的就是将agGrid"添加到您的 angular 模块的依赖项中，例如var module = angular.module("example", ["agGrid"]); 那么你可以在你的模板和指令中使用 ag-grid.有关详细信息，请参阅 ag-grid 文档.

因此从 app.directive('inApptConflict', ['angularGrid', function (angularGrid) { 行中删除 'angularGrid' 就可以了.

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!

解决方案

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.

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