Apply kendo dropdownlist style only on angular sel

Question

I have a select which is being populated using angular binding.

<select class='clsBucket' id='optBuckets' ng-options='opt as opt.name for opt in buckets' ng-model='bucketSelected' ng-change='changeBucket()'>

Now i want to apply the Kendo dropdownlist style on this select , but i don't want to populate the options using kendo datasource etc and continue to do that using angular.

If i use $('#optBuckets').kendoDropDownList() then i get the requiired style applied but the binding data is lost.

Any help in order to resolve that is highly appreciated.

Answer 1

The above code lists "buckets" as the data source. With that in mind, the promise which assigns 'buckets' to the scope should have it's promise exposed on the scope. From there a directive can access it (here called 'bucketsPromise')

The code in the controller may look like such:

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

The directive will the appear as such:

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

The given select would appear as such:

<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>