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.
source to share
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>
source to share