在AngularJS控制器中初始化Kendo网格很困难

Question

我试图将一些数据绑定到Angular-Kendo UI网格，但只要我单击包含网格小部件的选项卡，我就会得到以下错误：

Error: error:unpr
Unknown Provider
Unknown provider: $modalInstanceProvider <- $modalInstance
Description
This error results from the $injector being unable to resolve a required dependency. 

我真的不确定为什么它会在$modalInstance上崩溃，因为我试图用一些数据连接我的Kendo网格。这很奇怪。

这是我的HTML：

<div data-ng-controller="GridSettingsCtrl" class="col-md-4">
        <div class="col-lg-12"> 
                <h3>Choose a Dimension grouping</h3>  
                <span id="userDimenGrid" kendo-grid="userDimenGrid" 
                        k-data-source="userDimenGridDS"
                        k-options="userDimenGridOptions" 
                        k-rebind="userDimenGridOptions" />
        </div>
    </div>

下面是我的Angular控制器代码：

仅供参考:在我的js代码中，HTML k-data-source="userDimenGridDS"被连接到Kendo DataSource $scope.userDimenGridDS -它反过来调用read: getUserDimensionsList来获取数据。

(function () {
'use strict';
angular.module('rage')
   .controller('GridSettingsCtrl', ['$scope', '$modalInstance', 'datacontext', 'widget', gridSettings]);

function gridSettings($scope, $modalInstance, datacontext, widget) {

       var settings = this;

       // add widget to scope
       $scope.widget = widget;

       // set up result object
       $scope.result = jQuery.extend(true, {}, widget);

       $scope.ok = function () {
           $modalInstance.close($scope.result);
       };

       $scope.cancel = function () {
           $modalInstance.dismiss('cancel');
       };

       $scope.userDimenGridOptions = {
           selectable: true,
           sortable: true,
           pageable: true,
           columns: [
             { field: "id", width: "10px", hidden: true },
             { field: "dimension", width: "80px", editor: dimenDropDown, template: "#=dimension#" },  // DropDown editor defined !!
             { field: "hierarchy", width: "60px" },
             { command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], width: 120 }
           ],
           editable: "inline",
           toolbar: ["create"],             
       };

       // SERVER-SIDE DIMENSIONS DATA SOURCE - see dimenDropDown()
       $scope.dimensionsDataSource = new kendo.data.DataSource({
           transport: {
               read: getDimensionsFromServer
           }
       });


       // USER DIMENSIONS DATA SOURCE !!
       $scope.userDimenData = [];
       $scope.userDimenGridDS = new kendo.data.DataSource({               
           transport: {                  
               read: getUserDimensionsList,
               create: function (options) {
                   options.success(options.data);
               }
           },
           schema: {
               model: {
                   id: "id",
                   fields: {
                       dimension: { type: "string" },
                       hierarchy: { type: "boolean" }
                   }
               }
           },
           pageSize: 5
       });
       // SERVER-SIDE DIMENSIONS DATA SOURCE - see dimenDropDown()
       $scope.dimensionsDataSource = new kendo.data.DataSource({
           transport: {
               read: getDimensionsFromServer
           }
       });

};   // end of gridSettings()

function getUserDimensionsList(options) {
    // Retrieve user dimensions list from server or local cache, and return to Kendo Grid DataSource.
    // Called by: read option of $scope.dimenUserGridDS

    var userDimenFromStorage;
    if ($scope.readUserDimensionsFromCache) {   // pull from cache
        userDimenFromStorage = reportsContext.getUserDimenFromLocalStorage();
    }
    if ($scope.readUserDimensionsFromCache && userDimenFromStorage != null && userDimenFromStorage.length != 0) {
        options.success(userDimenFromStorage);
    }
    else {  // pull from server
        datacontext.getDimenUserList().then(function (data) {
            if (data.status == 'FAIL') {
                if (data.messages.length > 0) {
                    logErr("Error retrieving user Dimensions list: " + data.messages[0]);
                    return;
                }
            }
            else {
                // RETURN DUMMY REC FOR TESTING...
                $scope.userDimenData = data;
                options.success($scope.userDimenData);
            }
        });
    }
}
function getDimensionsFromServer(options) {
    datacontext.getDimensionsFromServer().then(function (data) {
        if (data.status == 'FAIL') {
            if (data.messages.length > 0) {
                logErr("Error retrieving KRI list: " + data.messages[0]);
                return;
            }
        }
        else {
            options.success(data.data);
        }
    });
}
// USER DIMENSION DROPDOWN FOR GRID
function dimenDropDown(container, options) {
    $('<input id="dimenDropDown" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoComboBox({
        dataTextField: "name",
        dataValueField: "name",
        dataSource: $scope.dimensionsDataSource
    });
}
})();

这是一个屏幕截图，显示了我单击以获得"Dimension Grouping“网格的选项卡，当然，由于错误，它还没有呈现：

​

​

正如我所提到的，只要我单击"Dimensions“选项卡，就会出现错误-这是它应该尝试将数据绑定到Kendo网格的时候。这是一个屏幕截图：

​

如果任何人能看到我的代码有问题，您的建议将不胜感激……

向您致敬，鲍勃

Answer 1

我找到我的问题了。我使用的是Malhar仪表板小部件框架，它在设置中指定了控制器。

引用github上的Malhar仪表板：https://github.com/DataTorrent/malhar-angular-dashboard

因此，我的HTML最终是这样的，没有数据控制器属性：

  <div class="col-md-4">
        <div class="col-lg-12"> 
                <h3>Choose a Dimension grouping</h3>  
                <span id="userDimenGrid" kendo-grid="userDimenGrid" 
                        k-data-source="userDimenGridDS"
                        k-options="userDimenGridOptions" 
                        k-rebind="userDimenGridOptions" />
        </div>
    </div>