Apply kendo dropdown style only on angular select
I have a selection that is populated with an angular binding.
<select class = 'clsBucket' id = 'optBuckets' ng-options = 'opt as opt.name to select in buckets' ng-model = 'bucketSelected' ng-change = 'changeBucket ()'>
Now I want to apply the Kendo dropdownlist style for this selection, but I don't want to populate the options with kendo datasource etc. and keep doing it with angular.
If I use $ ('# optBuckets'). kendoDropDownList (), then I get the style I want, but the binding data is lost.
Any help to fix this issue is greatly appreciated.
The above code lists "buckets" as the data source. With this in mind, a promise that assigns "buckets" to scope should secure it. From there the directive can access it (called "bucketsPromise" here)
The code in the controller might look like this:
$scope.bucketsPromise = bucketsService.get().then(function(data) {
$scope.buckets = data;
}).promise;
The directive will appear as such:
.directive('angularToKendoDropdown', function() {
return {
scope: {
'bindToCtrl': '&dataSourcePromise'
},
link: function(scope, element, attr) {
scope.bindToCtrl.then(function() {
$(element).kendoDropDownList();
})
}
};
});
This choice will look like this:
<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>