Kendo DataSource, AngularJS - 정의되지 않은 속성

Question

webservice에서 반환 된 복잡한 json으로 표를 채 웁니다. 내 JSON은 두 가지를 포함

• 데이터 : I 성공적으로 격자를 채운

그리드의 구성 (레이아웃)와 배열 : 그리드

열을 채울 기록과 배열 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.column에 문제가 있습니다. 어떤 도움을 많이 주시면 감사하겠습니다! http://plnkr.co/edit/5pjFQGkgTivqVkxsFBse

Answer 1

왜냐하면 angularjs는 제 3 자의 변경 사항을 인식하지 못하고 마법의 양방향 데이터 바인딩을 놓치기 때문입니다. 비록 귀하의 경우에 약속이 잘 될 것이라고 생각하지만

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