如何在 Kendo Grid Column 中使用 Angular 指令答案

【问题标题】：How to use Angular directive inside Kendo Grid Column如何在 Kendo Grid Column 中使用 Angular 指令
【发布时间】：2017-06-16 03:38:46
【问题描述】：

这个比较简单，至少我是这么想的。

我有一个自定义的 Angular 指令 - 我可以将它添加到 DOM 中

<custom-directive ng-model="someAngularScopeObject"></custom-directive>

我的问题是如何将其用于 Kendo Grid 列模板。

我的网格是使用 DOM 角度属性定义的，剑道网格 k-options 是在角度范围内指定的。

对于列模板，如何将行的列 dataItem 绑定到我的自定义指令 ng-model？

基本上，在网格的 k-options 中：

columns: [
        { field: "name", title: "Name" },
        { field: "description", title: "Description" },
        { field: "managerName", title: "Manager",
            template: function (dataItem) {
                //what I care about is dataItem.prop1
                return ("<custom-directive ng-model='???????????'>
                         </custom-directive>");     
        }
    }]

网格和网格的数据源在 Angular 的控制器范围内

【问题讨论】：

你想达到什么目的？是否要编辑指令内的网格列数据？
目前，我只是尝试做 R-O 模板，但最终，我也会在编辑器模板中绑定不同的指令。但该指令有 2 路绑定。

标签： angularjs angularjs-directive kendo-ui kendo-grid

【解决方案1】：

对于 R-O 模板，您可以这样尝试：

columns: [
    { field: "name", title: "Name" },
    { field: "description", title: "Description" },
    { field: "managerName", title: "Manager",
        template: function (dataItem) {
            //what I care about is dataItem.prop1
            var scope = angular.element("idofelement_with_your_scope").scope();
            scope.someAngularScopeObject = dataItem.prop1;
            return ("<custom-directive ng-model='someAngularScopeObject'>
                     </custom-directive>");     
    }
}]

我还没有测试过，但应该可以完成这项工作。这个想法是在template 函数中你有一个值，在指令中你需要一个属性/对象来绑定。

【讨论】：