在 AngularJS 中使用 KendoUI 方法

Question

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

示例显示如何使用它（没有 angular）

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

Answer 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();
        }
    };
});

Answer 2

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

<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

在 AngularJS 中使用 KendoUI 方法

Using KendoUI methods in AngularJS

kendo-ui

angularjs

kendo-mobile