我有一个选择正在被使用填充角度绑定。

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

＆LT;选择类='clsBucket'ID​​ ='optBuckets'NG选项= NG-模式水桶opt作为opt.name对于选择'='bucketSelected'NG-变化='changeBucket（）'＆GT;

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

现在我想申请这个选择剑道DropDownList的风格，但我不希望使用填充数据源剑道等选项，并继续认为采用了棱角分明的事情。

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.

如果我使用$（'＃optBuckets'）。kendoDropDownList（），然后我得到应用requiired风格，但绑定数据丢失。

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

为了解决任何帮助是非常AP preciated。

Any help in order to resolve that is highly appreciated.

推荐答案

以上code列出了水桶作为数据源。考虑到这一点，从而赋予水桶到示波器的承诺应该有它的承诺暴露的范围。从那里，一个指令可以访问它（这里称为bucketsPromise'）

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

在控制器中的code可能看起来像这样的：

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>