從Q2 2014版本開始，Kendo UI Core, Kendo UI Professional 和 server wrappers集成了Google前端JS框架AngularJS。Kendo UI Q2 2014集成Angular框架，無疑對(duì)Angular開發(fā)者來說是一大福音。從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ì)隨之更新?？偟膩碚f，這適用于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無法識(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中，你必須通過指令明確的傳遞這些參數(shù)。

 

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

 

 

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

 

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

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

這是個(gè)非常有用的功能，它可以讓你將UI和相關(guān)的配置的分離。但是，由于Angular無法識(shí)別通過配置對(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è)問題在最初階段就可以避免，因?yàn)镵endo UI在它的聲明初始化階段不需要這樣的引用。

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

 

data-value-field="value" />

value-field="'value'" />

 

然而，這就是Angular的運(yùn)行機(jī)制，我認(rèn)為它自動(dòng)引用字符串是反直覺的。毫無疑問，如果你不熟悉Angular參數(shù)解析，你會(huì)覺得非?；靵y。所以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ù)中刪除。

 

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

 

 

 

 

7、遵守范圍的層次結(jié)構(gòu)

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

Angular Kendo UI誕生的主要目的是將Kendo UI的強(qiáng)大功能集成到Angular中，并且不會(huì)讓你放棄自己的引用去采用一個(gè)全新的框架。