Angular JS UI 手风琴标题仅在单击时更新答案

【问题标题】：Angular JS UI Accordions Heading Updated Only When ClickedAngular JS UI 手风琴标题仅在单击时更新
【发布时间】：2014-12-06 00:19:30
【问题描述】：

AngularJS UI Accordion 组件有一点问题。 Accordion 似乎没有反映我设置的 $scope 变量的值，只有在我单击页面上的组件本身时才会反映它。

在我的 Kendo UI Grid 组件中，我定义了如下选项：

$scope.gridOptions = {
    dataSource: {
        type: "json",
        data: $scope.reviews,
        pageSize: 5
    },
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    change: gridSelected,
    selectable: 'row',
    columns: [
        { field: "field1", title: "Field 1"},
        { field: "field2", title: "Field 2"},
        { field: "field3", title: "Field 3"},
        { field: "field4", title: "Field 4"},
        { field: "field5", title: "Field 5"},
        { field: "field6", title: "Field 6"},
        { field: "field7", title: "Field 7"},
        { field: "field8", title: "Field 8"}
    ]
};

在我的功能中：

function gridSelected(arg) {
    var selectedRow = this.select();
    var dataItem = this.dataItem(selectedRow[0]);

    $scope.fld1 = dataItem.field1;
    $scope.fld2 = dataItem.field2;

    console.log($scope.fld1);
    console.log($scope.fld1);
};

从 console.log 中，我可以验证 $scope.fld1 和 $scope.fld2 的值都与 Kendo 网格中的选定行一样正确。

我的手风琴定义如下：

<div class="row" style="margin-right:-5px">
    <accordion>
        <accordion-group heading="{{fld1}}" >
            Contains Items for First Accordion
        </accordion-group>

    </accordion>

    <accordion>
        <accordion-group heading="{{fld2}}">
            Contains Items for Second Accordion
        </accordion-group>
    </accordion>
</div>

我不太确定为什么 fld1 和 fld2 的文本仅在我单击以下任何手风琴组件时出现（单击时会更新两个标题文本）。

更新：我开始认为这可能与 kendoUI 问题有关，因为我尝试使用普通的 ui-grid 并且 $scope 变量会立即更新并反映在 UI 中。但仍在深入挖掘。

【问题讨论】：

你在为 Kendo UI Grid 使用 Angular 指令吗？
是的，我正在使用 KendoUI Grid 提供的指令和示例。
尝试像这样包装它：$scope.$apply(function () { $scope.fld1 = dataItem.field1; $scope.fld2 = dataItem.field2; });。我猜想在使用 Angular Kendo 指令时不需要它，但你永远不知道。

标签： angularjs kendo-ui accordion

【解决方案1】：

通过这篇文章能够解决这个问题：

A Few Angular Kendo UI Best Practices

实际上我错过了 $apply 调用。

【讨论】：