Angularjs 以角度方向包裹ag栅格

我正在创建向导，以便在应用程序中添加新约会。向导的最后一页包含一个选项卡式部分，其中包含基于多个条件的所有潜在冲突。每个选项卡都是标准之一，并使用角度栅格显示冲突列表。由于每个网格都有相同的列，但包含不同的数据，因此我希望使用指令将角度网格及其网格选项包装在模板中，然后在指令的另一个属性中设置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();
        }
    };
}]);

“严格使用”；
应用指令（'inApptConflict'，['angularGrid'，函数（angularGrid）{
返回{
限制：“A”，
是的，
要求：“？ngModel”，
模板：“”，
控制器：功能（$scope）{
//用于在网格中显示日期的函数
函数DateTimeCellRenderFunc（参数）{…}
//列定义
var conflictColumnDefs=[
{colId:“Id”，字段：“Id”，hide:true}，
{colId:“StartTime”，字段：“StartTime”，headerName:“Start”，宽度：150，cellRenderer:DateTimeCellRenderFunc}。。。
];
//网格选项
$scope.conflictGridOptions={
columnDefs：冲突columnDefs，
rowData:null，
angularCompileRows：没错，
enableColReseize：true
};
},
链接：函数（$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不需要在指令中注入“angularGrid”（并且没有此类可注入元素）。 在angular模块中注册所有已注册指令后，所有模板都可以使用这些指令

你唯一需要做的就是在angular模块的依赖项中添加“agGrid”，比如

var module=angular.module（“示例”[“agGrid”]）然后在模板和指令中使用ag网格。
有关更多详细信息，请参阅

因此，从app.directive（'inApptConflict'，['angularGrid'，function（angularGrid）{

行中删除'angularGrid'，您就可以开始了。

您的指令中不需要注入'angularGrid'（并且没有这样的可注入元素）。 在angular模块中注册所有已注册指令后，所有模板都可以使用这些指令

你唯一需要做的就是在angular模块的依赖项中添加“agGrid”，比如

var module=angular.module（“示例”，[“agGrid”]）；

然后在模板和指令中使用ag网格。 有关更多详细信息，请参阅

---

所以从app.directive（'inApptConflict'，['angularGrid'，function（angularGrid）{中删除'angularGrid'，你应该很乐意去做。

谢谢。我想这意味着你不能在自定义指令中使用ag网格。这是一个遗憾，因为这意味着我必须把它写3倍（还有很多下载）不只是创建一个可重用的小部件。不，这不是我的意思。我的意思是你不需要将angularGrid注入到你的InAppltConflict指令中。谢谢。我想这意味着你不能在自定义指令中使用ag网格。这是一个遗憾，因为这意味着我必须写出3倍的内容（还有更多的下载）而不是仅仅创建一个可重用的小部件。不，这不是我的意思。我的意思是你不需要将angularGrid注入到你的InAppltConflict指令中。