從Q2 2014版本開始，Kendo UI Core, Kendo UI Professional 和 server wrappers集成了Google前端JS框架AngularJS（詳細更新）。Kendo UI Q2 2014集成Angular框架，無疑對Angular開發者來說是一大福音。從DropDowns到Schedulers，再到類型豐富的圖表，Kendo UI強大的界面組件成為很多開發者的首選。下面，小編跟大家分享7個使用Angular Kendo UI的小技巧，讓你快速掌握新功能的使用。

1、使用ObservableArrays or DataSources，而不是Arrays

Angular提出了開發者對UI的期望：視野內放置的任何元素，都可以綁定到UI。更新其中的任一個，另一個也會隨之更新。總的來說，這適用于Angular本身，因為Angular會追蹤所有視野內的項目和DOM綁定。因此，我們自然可以假設如何Kendo UI組件綁定到一個數組，修改這個數組就會修改組件中的數據。但事實并非如此。

當Kendo UI組件的某個數組設置為k-data-source時，傳遞給Kendo UI組件的指令還是一個數組。Kendo UI無法識別每個集合對象的變化，它只識別特殊對象，特別是Observables, ObservableArrays 和 DataSources（封裝是可見的）。所以，你在處理Kendo UI組件時，最好是用ObservableArray 或者Kendo UI DataSource，而不要采用純數組。

2、不要忘記相關的kendoEvent

Kendo UI組件觸發事件，這些事件通常有一個含有重要信息的事件參數。在Angular Kendo UI中，你必須通過指令明確的傳遞這些參數。

<select kendo-drop-down-list k-on-change="change()"></select>
<script>
function HomeCtrl($scope) {
// logs 'undefined'
$scope.change = function(e) {
console.log(e);
}
}
</script>

另外，Angular Kendo UI要求使用事件綁定明確傳遞kendoEvent對象。

<select kendo-drop-down-list k-on-change="change(kendoEvent)"></select>
<script>
function HomeCtrl($scope) {
// logs the kendo event object
$scope.change = function(e) {
console.log(e);
}
}
</script>

記住這個小竅門可以節省很多時間，你不用再去花時間去想為什么事件綁定沒有收到任何參數。

3、有時你必須使用 $Apply

由于有些組件通過屬性（圖表尤其如此）獲得了超級詳細的配置，Kendo UI提供了k-options選項，使大家可以通過scope提供的選項配置對象。

這是個非常有用的功能，它可以讓你將UI和相關的配置的分離。但是，由于Angular無法識別通過配置對象提供的事件綁定，所以遇到這種情況你需要調用$apply。

4、用ng-model代替雙向綁定的值

Kendo UI指令主要涉及到每個組件的change事件和value方法。有時候你可能在初始化階段設置組件的value，但是隨后對它進行了更改，你必須使用`value()``方法。

在Angular中，我們真正想要的是雙向綁定組件，要實現這個目標，就不能使用k-value屬性，而用ng-model代替。

5、記住'Strings'

Angular的解析引擎需要引用'Strings'屬性，否則value會被當做一個scope屬性。這個問題在最初階段就可以避免，因為Kendo UI在它的聲明初始化階段不需要這樣的引用。

這個簡單的疏忽在使用AutoComplete, ComboBox, DropDownlist等需要判斷DataSource對象中哪個字段含有密鑰的組件時會出現問題。舉個例子，AutoComplete綁定到一個含有對象的數據源，注意使用Kendo UI Declarative初始化和Angular Kendo UI集成之間的微妙差別：

<script>
// assuming we have data that looks like this...
app.people = new kendo.data.DataSource({
data: [ { text: "Alabama", value: "AL" },
{ text: "Alaska", value: "AK" },
{ text: "Arizona", value: "AZ" },
{ text: "Arkansas", value: "AR" } ]
});
</script>
<!-- the autocomplete declaration looks like this (kendo ui declarative) -->
<input data-role="autocomplete" data-source="app.people" data-text-field="text"
data-value-field="value" />
<!-- but the Angular integrations require quotes around the dataTextField and
dataValueField attributes -->
<input kendo-auto-complete k-data-source="people" k-data-text-field="'text'" k-data-
value-field="'value'" />

然而，這就是Angular的運行機制，我認為它自動引用字符串是反直覺的。毫無疑問，如果你不熟悉Angular參數解析，你會覺得非常混亂。所以Angular Kendo UI在Angular獲取到一個不是范圍內的參數時，會自動登陸控制臺。這意味著當你使用某個范圍外的值時，你就會收到類似于下面這種的錯誤提示：

kendoAutoComplete's kDataTextField attribute resolved to undefined. Maybe you meant
to use a string literal like: 'text'?

6、利用組件引用

當你需要為Kendo UI組件獲取一個引用時，如果你沒有使用Angular，你只需要選擇jQuery元素并將組件引用從它的數據參數中刪除。

<script>
// get the grid widget reference
$('#grid').data('kendoGrid');
// O R
$('#grid').getKendoGrid();
</script>

當然，用jQuery從 Angular 控制器中選擇項目是一件讓人糾結的事情，并且還可能導致全盤崩潰。所以，Kendo UI給出了另外一種獲取組件引用的方式。所有你需要做的就是將一個范圍變量傳遞給指令。

<div kendo-grid="grid" ...></div>
<script>
function HomeCtrl($scope) {
$scope.refresh = function() {
// scope.grid is the widget reference
$scope.grid.refresh();
}
}
</script>

7、遵守范圍的層次結構

我們經常會將組件嵌入另一個組件，或者是將指令嵌入另一個指令。通常的做法是將某個Kendo UI控件放入Kendo UI Window，或者將組件放入TabsTrip, Splitter等等。如果你的范圍綁定不帶前綴，你很容易遇到范圍層次的問題。記住，范圍不是模型，它只是模型放置的地方。你一不小心就肯呢過遍布自己的模型，這可能會導致空的組件引用和其他各種古怪的問題。

Angular Kendo UI誕生的主要目的是將Kendo UI的強大功能集成到Angular中，并且不會讓你放棄自己的引用去采用一個全新的框架。欲了解更多Angular Kendo UI的信息，請訪問。

神秘的附加秘訣——8、加入慧都學院獨家Kendo UI培訓

Telerik中國區總代理——慧都整合國內一線講師資源，全新開發的已經正式上線！Kendo UI for jQuery線下研修班 與 Kendo UI企業內訓雙拳出擊，總有一款適合你！

旨在幫助您快速上手Kendo UI相關產品，學會使用Kendo UI for jQuery快速建立網站和移動應用，熟悉Kendo UI核心功能，并精通多個常用控件。

將幫助您全面了解Progress相關產品，學會使用Kendo UI for jQuery快速建立網站和移動應用，快速掌握Kendo UI核心功能，并精通各類控件在項目中的合理使用。

慧都特邀Kendo UI原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>