Question

如何在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
}

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

是否有其他（正确）方法使用widget方法？我对这里的最佳做法感到好奇，因为这一切都感觉不像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();
});

你是对的，在widget上调用方法并不像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方法

2 个答案: