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

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

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

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

2、不要忘記相關(guān)的kendoEvent

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

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

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

3、有時你必須使用 $Apply

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

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

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

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

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

5、記住'Strings'

Angular的解析引擎需要引用'Strings'屬性，否則value會被當(dāng)做一個scope屬性。這個問題在最初階段就可以避免，因?yàn)镵endo UI在它的聲明初始化階段不需要這樣的引用。

這個簡單的疏忽在使用AutoComplete, ComboBox, DropDownlist等需要判斷DataSource對象中哪個字段含有密鑰的組件時會出現(xiàn)問題。舉個例子，AutoComplete綁定到一個含有對象的數(shù)據(jù)源，注意使用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的運(yùn)行機(jī)制，我認(rèn)為它自動引用字符串是反直覺的。毫無疑問，如果你不熟悉Angular參數(shù)解析，你會覺得非常混亂。所以Angular Kendo UI在Angular獲取到一個不是范圍內(nèi)的參數(shù)時，會自動登陸控制臺。這意味著當(dāng)你使用某個范圍外的值時，你就會收到類似于下面這種的錯誤提示：

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

6、利用組件引用

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

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

當(dāng)然，用jQuery從 Angular 控制器中選擇項(xiàng)目是一件讓人糾結(jié)的事情，并且還可能導(dǎo)致全盤崩潰。所以，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、遵守范圍的層次結(jié)構(gòu)

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

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

神秘的附加秘訣——8、加入慧都學(xué)院獨(dú)家Kendo UI培訓(xùn)

Telerik中國區(qū)總代理——慧都整合國內(nèi)一線講師資源，全新開發(fā)的已經(jīng)正式上線！Kendo UI for jQuery線下研修班 與 Kendo UI企業(yè)內(nèi)訓(xùn)雙拳出擊，總有一款適合你！

旨在幫助您快速上手Kendo UI相關(guān)產(chǎn)品，學(xué)會使用Kendo UI for jQuery快速建立網(wǎng)站和移動應(yīng)用，熟悉Kendo UI核心功能，并精通多個常用控件。

將幫助您全面了解Progress相關(guān)產(chǎn)品，學(xué)會使用Kendo UI for jQuery快速建立網(wǎng)站和移動應(yīng)用，快速掌握Kendo UI核心功能，并精通各類控件在項(xiàng)目中的合理使用。

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