2014-10-06 53 views
3

我有一個正在使用角度綁定來填充的選擇。僅在角度選擇上應用kendo下拉列表樣式

<選擇類= 'clsBucket' ID = 'optBuckets' NG-選項= 'opt作爲水桶opt.name用於選擇' NG-模型= 'bucketSelected' NG-變化= 'changeBucket()' >

現在我想在這個選擇上應用Kendo dropdownlist樣式,但我不想使用kendo數據源等來填充選項,並繼續使用角度來做這件事。

如果我使用$('#optBuckets')。kendoDropDownList()然後我得到所需的樣式,但綁定數據丟失。

任何幫助,以解決這一問題,高度讚賞。

+0

您是否找到解決方案? – 2015-06-03 05:24:01

+0

我只是更新這個,因爲它可能是需要的人。在角度中,只有在獲取數據後才應用kendoDropDownList。 ' $ HTTP( '/ XX')。獲得()。成功(函數(){$ 超時(函數(){ $( '#optBuckets')。kendoDropDownList() }} ' – 2015-06-08 15:27:12

回答

0

上面的代碼列出了「桶」作爲數據源。考慮到這一點,將「桶」分配給範圍的承諾應該在範圍上承諾它的承諾。從那裏,一條指令可以訪問它(這裏稱爲「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>