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

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

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

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

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

Kendo UI組件觸發(fā)事件，這些事件通常有一個(gè)含有重要信息的事件參數(shù)。在Angular Kendo UI中，你必須通過(guò)指令明確的傳遞這些參數(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對(duì)象。

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

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

3、有時(shí)你必須使用 $Apply

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

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

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

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

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

5、記住'Strings'

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

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

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

6、利用組件引用

當(dāng)你需要為Kendo UI組件獲取一個(gè)引用時(shí)，如果你沒有使用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給出了另外一種獲取組件引用的方式。所有你需要做的就是將一個(gè)范圍變量傳遞給指令。

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

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

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

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

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

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

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