javascript - 当数据来自服务时如何正确渲染 Kendo UI PanelBar？

Question

使用 AngularJS，在 Controller 中调用服务。该服务被推迟，并且在某个时间接收数据。

angular.module("app").controller("dataController", ["$filter", "service"],
    function ($filter, service) {

        var vm = this;

        vm.panelBarOptions = {
            expandMode: "single"
        };

        service.execute({
            // some options to call API and get data
        }).then(function (data) {
            vm.data = data;
        });
    }
);

从服务接收到的数据与此硬编码数据类似:

var hardCodedData = [
    {
        title: "some title1",
        subtitles: [
            { subtitle: "subtitle 1.1" },
            { subtitle: "subtitle 1.2" }
        ]
    },
    {
        title: "some title2",
        subtitles: [
            { subtitle: "subtitle 2.1" },
            { subtitle: "subtitle 2.2" },
        ]
    }
];

接下来是用于显示此数据的 HTML 模板:

<ul kendo-panel-bar k-options="dataController.panelBarOptions">
    <li ng-repeat="item in dataController.data">
        {{ item.title }}
        <ul>
            <li ng-repeat="subitem in item.subtitles">{{ subitem.subtitle }}</li>
        </ul>
    </li>
</ul>

通过双向数据绑定(bind)，数据成功显示在模板内的浏览器中。但是，Kendo PanelBar 未正确呈现。我在 Controller 中使用硬编码数据(在本例中为hardCodedData)进行了一些测试，使用的结构和属性与服务提供的数据中使用的结构和属性相同。通过硬编码数据，PanelBar 可以正确呈现。

所以我假设 Kendo UI(使用其 Angular 指令)渲染 PanelBar，然后接收数据，使 DOM 发生更改，并且样式不会应用到 PanelBar。

我可能做错了。那么，这里缺少什么？也许我应该在成功接收数据后重新渲染PanelBar，但是如何？将其设为指令？

Answer 1

不幸的是，一旦初始化小部件，这就无法与 ng-repeat 一起使用。您可以做的一件事是使用PanelBar 的dataSource 选项以及k-rebind 属性(只要数据发生变化，它就会自动重建小部件)。这是一个例子:http://dojo.telerik.com/@tjvantoll/oHaC .