Kendo Grid with angularjs Filter Row Custom Directive

时间:2015-12-04 21:26:33

标签: angularjs kendo-grid

当网格位于filterMode: "row"时,我一直试图尝试为Kendo网格创建自定义过滤器模板。我可以让HTML出现,但是从不编译angular指令。

这是列的过滤器配置:

filterable: {
                        cell: {
                            template: function getTemplate(args) {
                                var container = $("<span>").appendTo(args.element.parent());
                                var buttonTemplate = kendoGridService.compileTemplate({
                                    template: "modules/common/templates/kendo/columns/days-of-week-edit.tpl.html",
                                    data: options
                                });
                                container.append(buttonTemplate);
                            },
                            showOperators: false
                        }
                    }

这是上面提到的编译模板函数:

compileTemplate: function compileTemplate(options) {

                var template = $templateCache.get(options.template);
                var templateFn = kendo.template(template);
                var result = templateFn(options.data);

                return result;
            }

以下是我在HTML中看到的内容:

<span class="k-operator-hidden">
  <input data-bind="value: value">
  <span>
   <days-of-week-edit data-item="dataItem"></days-of-week-edit>
  </span>
</span>

最后,这就是我在UI中看到的内容。并非默认输入字段存在,但没有其他任何内容呈现。

enter image description here

1 个答案:

答案 0 :(得分:1)

好像你还需要使用Angular编译模板。尝试使用$compile服务:

            var template = $templateCache.get(options.template);
            var templateFn = kendo.template(template);
            var result = templateFn(options.data);

            $compile(result)($scope);

            return result;

确保您拥有一个有效$scope对象,其中包含dataItem属性