Kendo DataSource，AngularJS - undefined属性

Question

我想用webservice返回的复杂json填充网格。我的JSON包含两件事情：

• 数据：与记录阵列，将填补电网
• 列：阵列与电网的配置（布局）

我已经成功地填补了网格通过指定schema.data与“数据”。

我的问题是与网格配置（布局）。我得到数据源的requestEnd事件上的列数组，我将它添加到customersSource（数据源），所以我可以在gridOptions中访问它。

问题是，即使当我登录customersSource对象时，我看到我添加的cols数组在那里，并且填充了正确的数据$scope.mainGridOptions.columns未设置为customersSource.cols。

我认为这可能与customersSource.cols是异步设置的事实有关，但不应该用数据绑定来处理这个问题？

此外，我已阅读Data source vs. Angular，我可能不得不将某些东西设置为Observable，但我很困惑要做什么。

我该如何解决这个问题？

这里是我的代码：

var customersSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "http://....", 
       dataType: "json" 
      } 
     }, 
     schema: { 
      data: "data" 
     }, 
     requestEnd: function (e) { 
      this.cols = e.response.columns; 
     } 
    }); 

$scope.mainGridOptions = { 
     dataSource: customersSource, // OK 
     columns: customersDataSource.cols, // undefined - uses default 
     height: 500, 
     scrollable: true, 
     selectable: true 
    }; 

这里是我的JSON

{ 
    "data": [ 
    { 
     "id": 0, 
     "firstname": "Dalton", 
     "lastname": "Holden", 
     "gender": "male", 
     "email": "daltonholden@tellifly.com", 
     "phone": "871-407-2973", 
     "address": "22 National Drive, Brenton, Louisiana", 
     "birthday": "21/04/1965", 
     "currency": "GBP" 
    }, 
    { 
     "id": 1, 
     "firstname": "Allyson", 
     "lastname": "Odom", 
     "gender": "female", 
     "email": "allysonodom@tellifly.com", 
     "phone": "922-548-2725", 
     "address": "44 Quincy Street, Thynedale, Georgia", 
     "birthday": "28/08/1961", 
     "currency": "CHF" 
    }, 
    { 
     "id": 2, 
     "firstname": "Sweet", 
     "lastname": "Branch", 
     "gender": "male", 
     "email": "sweetbranch@tellifly.com", 
     "phone": "880-593-2244", 
     "address": "81 Fenimore Street, Veguita, Missouri", 
     "birthday": "08/08/1953", 
     "currency": "AUD" 
    } 
    ], 

    "columns": [ 
    { 
     "field": "firstname", 
     "title": "Frist Name", 
     "width": 200, 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "lastname", 
     "title": "Last Name", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "gender", 
     "title": "Gender", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "email", 
     "title": "e-mail", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "phone", 
     "title": "Phone Number", 
     "attributes": { 
     "class": "", 
     "style": "text-align: right;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: right;" 
     } 
    }, 
    { 
     "field": "address", 
     "title": "Address", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "birthday", 
     "title": "Birthday", 
     "attributes": { 
     "class": "", 
     "style": "text-align: center;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: center;" 
     } 
    }, 
    { 
     "field": "currency", 
     "title": "Currency", 
     "attributes": { 
     "class": "", 
     "style": "text-align: center;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: center;" 
     } 
    } 
    ] 
} 

---

编辑 我创造了我的测试项目的plunker。正如你所看到的，我可以填充网格，但是我对mainGridOptions.columns有问题。任何帮助都感激不尽！ http://plnkr.co/edit/5pjFQGkgTivqVkxsFBse

Answer 1

这是因为angularjs不知道第三方所做的更改，而且您错过了神奇的双向数据绑定。虽然我认为承诺会很好的在你的情况下

requestEnd: function (e) { 
    $scope.$apply(function(){ 
    $scope.mainGridOptions.columns = e.response.columns 
    }) 
}