如何在AngularJS中使用Kendo Grid Column Template中的函数

Question

我在Kendo网格中有一个列,我想在渲染时执行一些特定的逻辑,并使用Angular.我使用k-columns指令设置了网格列.

看完文档后,看起来很简单:我可以将模板选项添加到我的列,定义执行逻辑的函数,并传递dataItem值.我看起来像这样:

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

但是,运行它会导致语法错误,抱怨在我的函数中形成块的开头的字符"{".

我已经看到了几种以这种格式定义模板函数的例子.还有什么需要做才能实现吗？我做错了什么吗？是否有另一种方法将模板定义为函数并将列数据传递给它？(我尝试在我的$ scope上创建一个函数,但是我无法弄清楚如何将数据传递给函数.)

谢谢您的帮助.

Answer 1

使用AngularJS和Kendo时,似乎不支持以这种方式定义列模板.此方法适用于不使用Angular(标准MVVM)但未包含Angular的项目.

我的同事发现的解决方法是使用ng-bind构建模板,以在$ scope中指定模板函数,所有这些都在跨度内:

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

这是Telerik在其Kendo-Angular源代码中实现的默认列模板方法.我还不知道data.Name值是否需要,但这适用于我们.

Answer 2

警告:此刻无法访问Kendo来测试代码,但这应该非常接近

在您的情况下,您将一个字符串赋值给k-columns的值,该字符串包含该单词function和大括号{

你需要确保函数被执行......这样的事情:

k-columns=[
    {
       field: "Name",
       title: "Name", 
       template: (function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
       }())
    }
];

注意区别:

我们创建了一个对象 - 一个真正的诚实对象,我们使用IIFE来填充template属性.