Question

我正在创建一个向导，在我们的应用程序中添加新约会。向导的最后一页包含一个选项卡式部分，其中包含基于多个条件的所有潜在冲突。每个选项卡都是一个标准，并使用Angular Grid显示冲突列表。由于每个网格具有相同的列，但包含不同的数据，我想使用指令将Angular Grid及其网格选项包装在Template中，然后在我的指令的另一个属性中设置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＆lt; - angularGrid＆lt; - inApptConflictDirective

我不知道还需要做些什么才能让指令识别ag-grid。我也试过使用$ compile，但最终得到了同样的错误。

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

提前感谢您的帮助！

Answer 1

无需在指令中注入'angularGrid'（并且没有这样的可注入元素）。只要在角度模块中注册它们，所有模板都可以使用所有注册的指令。

你唯一需要的是将'agGrid'添加到角度模块的依赖关系中 var module = angular.module("example", ["agGrid"]);然后您在模板和指令中使用ag-grid。有关详细信息，请参阅ag-grid documentation。

所以从第app.directive('inApptConflict', ['angularGrid', function (angularGrid) {行删除'angularGrid'，你应该好好去。

在角度指令中包裹ag-grid

1 个答案: