Question

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

我正在尝试使用包含kendo网格的templateUrl创建 指令，并在控制器中使用此指令 。

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

我错过了什么？（完全插入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');
              }
          });
        }
    };
  });

感谢您的任何建议。

Answer 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被“未定义”的错误。我不知道它的目的是什么，所以我只是在控制器中给它一个值（检查插件）。如果它还不完全是您想要的，请告诉我，我会进一步了解它。

Answer 2

感谢@ ocket-san花时间看这个。

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

我设法通过创建属性类型的指令来实现这一点，该指令扩展了kendo-grid的当前定义（用法），所以无论我想在哪里添加扩展，我都可以添加我的指令作为属性：

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

而不是：

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

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

请参阅plunker here。

在templateUrl中使用kendo网格进行角度调整

2 个答案: