angularjs - component - kendo ui grid angular 4

Aplicar el estilo de lista desplegable de kendo solo en la selección angular

Question

Tengo una selección que se está rellenando con enlace angular.

<select class = ''clsBucket'' id = ''optBuckets'' ng-options = ''optar como opt.name para elegir cubos'' ng-model = ''bucketSelected'' ng-change = ''changeBucket ()''>

Ahora quiero aplicar el estilo de la lista desplegable de Kendo en esta selección, pero no quiero completar las opciones usando el origen de datos del kendo, etc. y continuar haciendo eso usando angular.

Si uso $ (''# optBuckets''). KendoDropDownList () entonces obtengo el estilo requerido aplicado pero los datos de enlace se pierden.

Cualquier ayuda para resolver eso es muy apreciada.

Answer 1

El código anterior enumera "cubos" como la fuente de datos. Con esto en mente, la promesa que asigna ''cubos'' al alcance debería tener su promesa expuesta en el alcance. Desde allí, una directiva puede acceder a ella (aquí llamada ''bucketsPromise'')

El código en el controlador puede verse así:

$scope.bucketsPromise = bucketsService.get().then(function(data) {
  $scope.buckets = data;
}).promise;

La directiva aparecerá como tal:

.directive(''angularToKendoDropdown'', function() {
  return {
    scope: {
      ''bindToCtrl'': ''&dataSourcePromise''
    },
    link: function(scope, element, attr) {
        scope.bindToCtrl.then(function() {
          $(element).kendoDropDownList();
        })
    }
 };
});

La selección dada aparecería como tal:

<select class=''clsBucket angular-to-kendo-dropdown'' id=''optBuckets''
        ng-options=''opt as opt.name for opt in buckets''
        ng-model=''bucketSelected'' ng-change=''changeBucket()''
        data-source-promise=''bucketsPromise''>
</select>