技巧分享：快速掌握Angular Kendo UI的7大秘诀

从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中，你必须通过指令明确的传递这些参数。

另外，Angular Kendo UI要求使用事件绑定明确传递kendoEvent对象。

记住这个小窍门可以节省很多时间，你不用再去花时间去想为什么事件绑定没有收到任何参数。

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集成之间的微妙差别：

data-value-field="value" />

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元素并将组件引用从它的数据参数中删除。

当然，用jQuery从 Angular 控制器中选择项目是一件让人纠结的事情，并且还可能导致全盘崩溃。所以，Kendo UI给出了另外一种获取组件引用的方式。所有你需要做的就是将一个范围变量传递给指令。

7、遵守范围的层次结构

我们经常会将组件嵌入另一个组件，或者是将指令嵌入另一个指令。通常的做法是将某个Kendo UI控件放入Kendo UI Window，或者将组件放入TabsTrip, Splitter等等。如果你的范围绑定不带前缀，你很容易遇到范围层次的问题。记住，范围不是模型，它只是模型放置的地方。你一不小心就肯呢过遍布自己的模型，这可能会导致空的组件引用和其他各种古怪的问题。

Angular Kendo UI诞生的主要目的是将Kendo UI的强大功能集成到Angular中，并且不会让你放弃自己的引用去采用一个全新的框架。

公司名称：北京哲想软件有限公司

北京哲想软件官方网站：www.cogitosoft.com

北京哲想软件微信公众平台账号：cogitosoftware

北京哲想软件微博：哲想软件

北京哲想软件邮箱：[email protected]

销售（俞先生）联系方式：+86（010）68421378

微信：18610247936 QQ：368531638