Javascript 当数据来自服务时，如何正确呈现剑道UI面板条？

在控制器中使用AngularJS调用服务。此服务被延迟，并在某个时间接收数据

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>

{{item.title}

{{subitem.subtitle}

通过双向数据绑定，数据将成功显示在模板内的浏览器中。但是，剑道面板条没有正确渲染。我使用控制器中的硬编码数据（在本例中为hardCodedData）进行了一个小测试，使用了服务提供的数据中使用的相同结构和属性。使用硬编码数据时，面板栏将正确呈现

所以我假设KendoUI（使用它的Angular指令）渲染PanelBar，然后接收到数据，使DOM发生变化，样式不会应用到PanelBar

---

我可能做错了。那么，这里缺少什么？也许我应该在成功接收数据时重新呈现PanelBar，但是如何呢？使其成为一个指令？

不幸的是，一旦您初始化小部件，它就不能与

ng repeat

一起工作。您可以做的一件事是使用PanelBar的

dataSource

选项以及

k-rebind

属性（每当其数据发生变化时，该属性会自动重建小部件）。这里有一个例子：。

我不知道这是否是一个好的答案，因为它不是关于剑道UI PanelBar的。相反，我使用的是UI引导指令。我可以使用

ng repeat

并在刷新绑定数据时进行更新，不会出现任何问题

有关更多详细信息和示例：