在 AngularJS 中使用 KendoUI 方法答案

【问题标题】：Using KendoUI methods in AngularJS在 AngularJS 中使用 KendoUI 方法
【发布时间】：2015-05-28 06:34:50
【问题描述】：

如何在 AngularJS 应用程序中使用 KendoUI 小部件提供的方法？我知道，对于小部件的配置，指令属性通过 k- 前缀在标记中使用。但是在文档中，有很多分配给小部件的方法。例如kendo-mobile-tab-strip 小部件有一个switchTo 方法。

示例显示以这种方式使用它（没有角度）

var app = new kendo.mobile.Application();
function onClick() {
  var tabstrip = app.view().footer.find(".km-tabstrip").data("kendoMobileTabStrip");
  tabstrip.switchTo("#bar"); //activate "bar" tab
}

当我只使用 <kendo-mobile-application> 指令来初始化应用程序时，如何访问 Angular 控制器中的 app 变量？

还有其他（正确的）使用小部件方法的方法吗？我很好奇这里的最佳实践，因为这一切都不像 Angular...

【问题讨论】：

标签： angularjs kendo-ui kendo-mobile

【解决方案1】：

当您为小部件的属性（或k-scope-field 属性）提供值时，该值将成为可用于get a reference to the widget 的范围属性的名称。

HTML

<div ng-controller="MainCtrl">
    <div kendo-grid="myGrid"></div>
    <!-- or -->
    <div kendo-grid k-scope-field="myGrid"></div>
</div>

控制器

angular.controller("MainCtrl", function($scope) {
    // the widget is accessible from the scope
    $scope.myGrid.doSomething();
});

你是对的，在小部件上调用方法不像 Angular。因此，在大多数情况下，您希望将其放入您自己的指令中，包装 kendo 的小部件。这使您可以将 DOM 特定代码保留在应用程序控制器之外，并包含在它们所属的指令中。

HTML

<div ng-controller="MainCtrl">
    <my-grid-directive></my-grid-directive>
</div>

指令

angular.controller("myGridDirective", function() {
    return {
        template: "<div kendo-grid='myGrid'></div>",
        link: function (scope, element, attrs) {
            scope.myGrid.doSomething();
        }
    };
});

【讨论】：

k-scope-field 不适用于标签 html <div kendo-grid k-scope-field="myGrid"></div> 而您必须单独使用标签指令 <kendo-grid k-scope-field="myGrid"></kendo-grid>

【解决方案2】：

我从不使用剑道移动应用程序，因此它可能会有所不同，但通常通过在下面的示例中的剑道属性中添加标识符来访问 $scope 对象中的剑道对象。

<div ng-app="app" ng-controller="MyCtrl">
 <input kendo-datepicker="datePicker" k-on-change="onChange()">
</div>
<script>
   angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope) {
     $scope.onChange = function() {
   alert($scope.datePicker.value());
   };
 });
</script>

http://docs.telerik.com/kendo-ui/AngularJS/introduction#getting-widget-references

【讨论】：