快速掌握Angular Kendo UI的7大秘诀

呆瓜

从Q2 2014版本开始，Kendo UI Core, Kendo UI Professional 和 server wrappers集成了Google前端JS框架AngularJS（详细更新）。Kendo UI Q2 2014集成Angular框架，无疑对Angular开发者来说是一大福音。
1、使用ObservableArrays or DataSources，而不是ArraysAngular提出了开发者对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、不要忘记相关的kendoEventKendo UI组件触发事件，这些事件通常有一个含有重要信息的事件参数。在Angular Kendo UI中，你必须通过指令明确的传递这些参数。

1 2 3 4 5 6 7 8 9

<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对象。

1 2 3 4 5 6 7 8 9

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

1 2 3 4 5 6

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

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

1 2 3 4 5 6 7 8 9

<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等等。如果你的范围绑定不带前缀，你很容易遇到范围层次的问题。记住，范围不是模型，它只是模型放置的地方。你一不小心就肯呢过遍布自己的模型，这可能会导致空的组件引用和其他各种古怪的问题。
其实是转的啦~ 这是原文地址

觉得有用就点个赞吧~