從Q2 2014版本開始，Kendo UI Core, Kendo UI Professional 和 server wrappers集成了Google前端JS框架AngularJS。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。更新其中的任一個，另一個也會隨之更新?？偟膩碚f，這適用于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時(shí)，傳遞給Kendo UI組件的指令還是一個數(shù)組。Kendo UI無法識別每個集合對象的變化，它只識別特殊對象，特別是Observables, ObservableArrays 和 DataSources（封裝是可見的）。所以，你在處理Kendo UI組件時(shí)，最好是用ObservableArray 或者Kendo UI DataSource，而不要采用純數(shù)組。

 

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

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

 

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

 

 

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

 

3、有時(shí)你必須使用 $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í)候你可能在初始化階段設(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對象中哪個字段含有密鑰的組件時(shí)會出現(xiàn)問題。舉個例子，AutoComplete綁定到一個含有對象的數(shù)據(jù)源，注意使用Kendo UI Declarative初始化和Angular Kendo UI集成之間的微妙差別：

 

data-value-field="value" />

value-field="'value'" />

 

然而，這就是Angular的運(yùn)行機(jī)制，我認(rèn)為它自動引用字符串是反直覺的。毫無疑問，如果你不熟悉Angular參數(shù)解析，你會覺得非?；靵y。所以Angular Kendo UI在Angular獲取到一個不是范圍內(nèi)的參數(shù)時(shí)，會自動登陸控制臺。這意味著當(dāng)你使用某個范圍外的值時(shí)，你就會收到類似于下面這種的錯誤提示：

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

 

6、利用組件引用

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

 

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

 

 

 

 

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

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

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