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

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

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

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

<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的运行机制，我认为它自动引用字符串是反直觉的。毫无疑问，如果你不熟悉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元素并将组件引用从它的数据参数中删除。

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

当然，用jQuery从 Angular 控制器中选择项目是一件让人纠结的事情，并且还可能导致全盘崩溃。所以，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、遵守范围的层次结构

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

Angular Kendo UI诞生的主要目的是将Kendo UI的强大功能集成到Angular中，并且不会让你放弃自己的引用去采用一个全新的框架。欲了解更多Angular Kendo UI的信息，请访问Angular Kendo UI Demos。

神秘的附加秘诀——8、加入慧都学院独家Kendo UI培训

Telerik中国区总代理——慧都整合国内一线讲师资源，全新开发的Kendo UI培训已经正式上线！Kendo UI for jQuery线下研修班 与 Kendo UI企业内训双拳出击，总有一款适合你！

Kendo UI for jQuery线下研修班旨在帮助您快速上手Kendo UI相关产品，学会使用Kendo UI for jQuery快速建立网站和移动应用，熟悉Kendo UI核心功能，并精通多个常用控件。>>立即免费预约

Kendo UI企业内训将帮助您全面了解Progress相关产品，学会使用Kendo UI for jQuery快速建立网站和移动应用，快速掌握Kendo UI核心功能，并精通各类控件在项目中的合理使用。>>立即免费预约

慧都特邀Kendo UI原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情