當數據來自服務時，如何正確渲染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/ 。