templateUrl 中带有剑道网格的角度答案

【问题标题】：angular with kendo grid in templateUrltemplateUrl 中带有剑道网格的角度
【发布时间】：2016-02-02 08:36:30
【问题描述】：

（对不起，如果这是重复的，但我发现 not 回答了我的问题： Databinding is not working with kendo grid in angular JS directives )

我正在尝试使用包含剑道网格的 templateUrl 创建一个指令，并在控制器中使用该指令。

我可以设法绑定一些指令的属性（例如 my-grid-options，它在控制器中初始化）但不能 my-grid-id em>。

我错过了什么？（完整的 plunk here）

指令：

Directives.myGrid = function() {
    return {
        scope: {
            myGridId: "=",
            myGridOptions: "="
        },
        restrict: "E",
        transclude: true,
        templateUrl: 'myGrid.html',
        link: function(scope) {
            //... some code using the myGridId
            scope.myGridId.....
        }
    }
}

myGrid.html：

<div kendo-grid="myGridId" k-options="myGridOptions" id="myGridId">      
</div>

我想如何使用它：

<body ng-app='app' ng-controller='myCtrl'>
     <my-grid my-grid-id="mainGrid" my-grid-options="mainGridOptions"></my-grid>    
</body>

控制者：

angular.module('app').controller('myCtrl',function($scope){
    $scope.ds = [
          {Category:"Toys", Name: "Doll", Code: "p1", Special: false},  
          ....            
          {Category:"Stationary", Name: "Crayons", Code: "p4", Special: false}
        ];

    $scope.mainGridOptions = {            
        columns: [
            {
                field: "Category",
                title: "Category"
            },
            {
                field: "Name",
                title: "Name"
            },
            {
                field: "Code",
                title: "Code"
            }, 
            {
                field: "Special",
                title: "Special Offer"
            }, 
        ],
        dataSource: $scope.ds,
        sortable: true,
        selectable: true,
        resizable: true,
        pageable: true,
        reorderable: true,
        columnReorder: function (e) {
          //do something trivial... for example sake, but a more complex event is used
          $.each($scope.mainGrid.wrapper.find('tbody tr'), function () {
              var model = $scope.mainGrid.dataItem(this);
              if (model.Special === true) {
                  $(this).addClass('special-row');
              }
          });
        }
    };
  });

感谢您的建议。

【问题讨论】：

这可能是我愚蠢的匆忙，但我在控制器的任何地方都看不到 $scope.mainGrid 变量。但是，您确实尝试使用属性“my-grid-id”将其绑定到您的指令...
@ocket-san 我正在尝试通过指令中的 kendo-grid 生成它。如果我直接使用 kendo-grid 而不是带有 kendo-grid 的指令，看看它是如何工作的
好的。另外，我试图查看您的 plunkr 链接，但每次都超时。你能解决这个问题，这样我才能看得更清楚吗？ tnx
@ocket-san 它对我有用，但我现在也冻结了它并从其他人那里检查并且也有效。你能再试一次吗？谢谢

标签： angularjs kendo-grid

【解决方案1】：

好的，所以我要看看你的笨拙。我做了一些更改，这里是the result。

你仍然有一些问题。检查我在您的指令中所做的更改：

angular.module('app').directive('myGrid', function(){
      return {
        scope: {
            gridId: "=",
            gridOptions: "="
        },
        restrict: "E",
        replace: true,
        templateUrl: 'myGrid.html',
        link: function(scope) {
           console.log(gridId);
           console.log(scope.gridId);
            // var doMore = function() {
            //     $.each(scope.gridId.wrapper.find('tbody tr'), function () {
            //         var model = $scope.gridId.dataItem(this);
            //         if (model.Category === "Stationary") {
            //             $(this).addClass('stationary-row');
            //         }
            //     });
            // };

            // var extendReorder = function(baseReorder) {
            //     doMore();
            //     if (baseReorder)
            //         baseReorder();
            // };

            scope.gridOptions.columnReorder = extendReorder(scope.gridOptions.columnReorder);
        }
    };
  });

我删除了 tranclude:"true"，因为它导致了指令冲突。然后有关于你 gridId 是“未定义”的错误。我不知道它的目的是什么，所以我只是在控制器中给它一个值（检查 plunk）。如果它还不完全是您想要的，请告诉我，我会进一步研究。

【讨论】：

显然你需要冻结..因为我现在也超时了:)
:-) 我真是个傻瓜。它现在被冻结了！
我感谢您的努力，但我想要实现的是扩展剑道网格，而无需更改控制器中的任何内容。如果我将 kendo-grid 直接使用到控制器中，我不需要做任何事情来识别“mainGrid” - 它是通过以下行生成的：kendo-grid="mainGrid"。
我想添加一个额外的层（将 kendo-grid 封装到一个指令中，以便我可以扩展它）。所以我需要能够使用指令就好像它是剑道网格本身，这意味着通过简单地说获得mainGrid创建（在控制器中使用） my-grid-id="mainGrid"（以及进一步实例化 kendo-grid 并在其与控制器之间执行正确绑定的指令）
yeeey: 我成功了可以访问同一个 kendo-grid 实例

【解决方案2】：

感谢 @ocket-san 抽出宝贵时间查看此内容。

最终我得到了我想要的：在指令中扩展 kendo-grid 而不影响任何使用 kendo-grid 的控制器实现。

我通过创建一个 Attribute 类型的指令来做到这一点，该指令扩展了剑道网格的当前定义（使用），所以无论我想添加我的扩展，我都可以简单地添加我的指令作为属性：

<div kendo-grid="mainGrid" k-options="mainGridOptions" id="mainGrid" my-grid >

代替：

<div kendo-grid="mainGrid" k-options="mainGridOptions" id="mainGrid">

(fyi：我想为所有剑道设置分页按钮到顶部和底部-我的应用程序中的网格，而不必在整个地方复制扩展）

见 plunker here。

【讨论】：