Применять стиль выпадающего списка кендо только при выборе angular

У меня есть выбор, который заполняется с использованием привязки angular.

‹Select class = 'clsBucket' id = 'optBuckets' ng-options = 'opt as opt.name for opt in buckets' ng-model = 'bucketSelected' ng-change = 'changeBucket ()'›

Теперь я хочу применить стиль выпадающего списка Kendo к этому выбору, но я не хочу заполнять параметры с помощью источника данных kendo и т. Д. И продолжать делать это с помощью angular.

Если я использую $ ('# optBuckets'). KendoDropDownList (), тогда я получаю примененный требуемый стиль, но данные привязки теряются.

Любая помощь для решения этой проблемы приветствуется.


angularjs kendo-ui dropdownlistfor
person Rupam Roy    schedule 06.10.2014    source источник
comment
Вы нашли решение?   -  person Daniel Sklenitzka    schedule 03.06.2015
comment
Я просто обновляю это, так как это может кому-то понадобиться. В angular примените kendoDropDownList только после того, как вы получите данные. `$ http ('/ xx'). get (). success (function () {$ timeout (function () {$ ('# optBuckets'). kendoDropDownList ()}}`   -  person Rupam Roy    schedule 08.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

В приведенном выше коде в качестве источника данных указаны «корзины». Имея это в виду, обещание, которое назначает «ведра» области видимости, должно иметь это обещание, отображаемое в области видимости. Оттуда директива может получить к нему доступ (здесь называется bucketsPromise)

Код в контроллере может выглядеть так:

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

Директива будет выглядеть так:

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

Данный выбор будет выглядеть так:

<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>
person FesterCluck    schedule 14.08.2015