검도 UI AngularJS에서 정의되지 않은 격자 참조

Question

검도 UI를 AngularJS에 통합하려고합니다. 내가 풀 수없는 문제를 발견했습니다. 나는 AngularJS에 상당히 새로운 것으로, 가능한 한 최선을 다해 가이드 라인을 따르려고 노력하고 있습니다.

내 검도 UI 그리드에 대한 참조를 얻을 수 없다는 문제가 있습니다. 나는 비슷한 두 가지의 비슷한 질문을 이미 마쳤지 만 아무도이 문제를 해결하지 못하는 것 같습니다. 내 코드의 주요 차이점은 $ scope 대신 controllerAs를 사용하고 있다는 것입니다.

데이터 격자 컨트롤러 :

'use strict'; 

angular 
    .module('ayotaWebFeApp.datagrid') 
    .controller('DataGridController', DataGridController); 

DataGridController.$inject = ['$scope','$routeParams', 'datagriddataservice']; 

function DataGridController($scope, $routeParams, dataservice) { 
    console.info('DataGridController instantiated.'); 
    var vm = this; 
    vm.grid = {}; 
    vm.dataTitle = $routeParams.datatype; 

    activate(); 

    $scope.$on('kendoWidgetCreated', function(event, widget) { 
     console.log('kendowidgetcreated event: ', event); 
     console.log('kendowidgetcreated widget: ', widget); 

     $scope.$apply(); 
    }); 

    function activate() { 
     console.info('Activate was called.'); 
     return getDataFields().then(function() { 
      console.info('Loaded data fields for data type :'+$routeParams.datatype); 
     }); 
    } 

    function initGridOptions(columnSpec) { 
     var restURL = '/api/data'; 
     if($routeParams.ups) { 
      restURL += '/UPS/' + $routeParams.ups; 
     } else { 
      restURL += '/adm'; 
     } 
     restURL += '/' + $routeParams.historical; 
     restURL += '/' + $routeParams.datatype; 

     console.info('Data REST url : ', restURL); 
     console.info('fields: ', columnSpec); 
     vm.dataGridOptions = { 
      name: 'grid', 
      columns : columnSpec['columns'], 
      dataSource: { 
      type: 'json', 
      transport: { 
       read: 'http://localhost:57713'+restURL 
      }, 
      schema: { 
       model: { 
       fields : columnSpec['fields'] 
       } 
      } 
      }, 
      sortable: true, 
      filterable: true, 
      scrollable: true, 
      reorderable: true, 
      resizable: true, 
      selectable: 'single row', 
      columnMenu: true, 
      pageable: { 
      refresh: true, 
      buttonCount: 5 
      }, 
      dataBound: onDataBound, 
      height: '100%' 
     }; 
     console.info('vm.dataGridOptions : ', vm.dataGridOptions); 
     console.info('scope after datagridoptionsloaded: ', $scope); 
     console.info('vm.grid: ', vm.grid); 
     console.info('scope.vm.grid: ', $scope.vm.grid); 
    } 

    function getDataFields() { 
     return dataservice.getDataFields($routeParams.datatype) 
      .then(function(data) { 
       initGridOptions(data); 
      }); 
    } 

    function onDataBound(ev) { 
     console.log('DATABOUND !'); 
     //vm.grid = ev.sender; 
     var gh = $('.datagrid-grid').find('.k-grid-header'); 
     var gc = $('.datagrid-grid').find('.k-grid-content'); 
     //var rightPaddingHeader = gh.css("padding-right"); 
     gh.hide(); 
     gh.css('padding-right', '0px'); 
     gc.css('overflow-y', 'auto'); 
     gh.show(); 

     //resizeGrid(); 

     //unbind event 
     vm.grid.unbind('dataBound'); 
    } 

    function resizeGrid() { 
     console.log('vm.grid.dataSource: ', vm.grid.dataSource); 
     // trigger layout readjustment 
     vm.grid.resize(); 
     // force layout readjustment 
     vm.grid.resize(true); 

     //set new pagesize according to content height to avoid inner scrollbars 
     var gridContentWidget = $('.datagrid-grid .k-grid-content'); 
     console.info('gridContentWidget.height(): ', gridContentWidget.height()); 
     var rowHeight = $('.datagrid-grid .k-grid-content tr').first().height(); 
     var newPageSize = Math.floor(gridContentWidget.height()/rowHeight); 
     console.info('Setting dataSource to new pageSize: ', newPageSize); 
     if(newPageSize != vm.grid.dataSource.pageSize()) 
      vm.grid.dataSource.pageSize(newPageSize); 

     console.info('DataSource pageSize after set: ', vm.grid.dataSource.pageSize); 
    } 

} 

만 onDataBound 함수에 대응하는 HTML

<div class="datagrid-container"> 
<h2>{{vm.dataTitle}}</h2> 

    <div class="datagrid-grid"> 
    <div kendo-grid="vm.grid" 
    k-options="vm.dataGridOptions" 
    k-ng-delay="vm.dataGridOptions" 
    datagrid-resize /> 
    </div> 
</div> 

는 I 이벤트 송신기를 통해 기준을 얻을 수있다. 모든 제안 사항을 높이 평가합니다.

Answer 1

이 시도 : 아직 주위 JQuery와 throw하지 않고 그리드 참조를 얻기의 괜찮은 방법을 생각하지 않은

vm.gridReference = $('div[kendo-grid]').data('kendoGrid'); 

을하지만이 신속하고 더러운 위해 할 것입니다.