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

Question

在控制器中使用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>

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

因此，我假设Kendo UI（使用其Angular指令）呈现了PanelBar，并且在接收到数据之后，更改了DOM，然后将样式不应用于PanelBar。

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

Answer 1

不幸的是，一旦初始化小部件， ng-repeat不能与ng-repeat一起使用。 您可以做的一件事是使用PanelBar的dataSource选项和k-rebind属性（每当其数据更改时，它就会自动重建小部件）。 这是一个示例： http : //dojo.telerik.com/@tjvantoll/oHaC 。

Answer 2

我不知道这是否是一个好答案，因为这与Kendo UI PanelBar无关。 相反，我使用的是UI Bootstrap Accordeon指令。 当绑定数据刷新时，我可以使用该ng-repeat和更新而不会出现任何问题。

有关更多详细信息和示例，请参见： http : //angular-ui.github.io/bootstrap/ 。