Kendo 具有 angularjs 过滤器行自定义指令的网格

Question

我一直在尝试为 Kendo 网格创建自定义过滤器模板，当网格位于 filterMode: "row" 时。我可以让 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 中看到的内容。并不是默认输入字段在那里，而是没有呈现任何其他内容。

Answer 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 属性

Kendo 具有 angularjs 过滤器行自定义指令的网格

Kendo Grid with angularjs Filter Row Custom Directive

angularjs

kendo-grid