Question

我正在努力让我的扩展Kendo Widget与AngularJS一起使用。

使用Kendo只有我的扩展小部件可以正常工作，你会从下面的代码中看到，但是使用Angular它不会。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kendo Menu Extended</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
    <script>
      (function ($) {

        var MyMenu = window.kendo.ui.Menu.extend({
          init: function (element, options) {
            window.kendo.ui.Menu.fn.init.call(this, element, options);
          },
          options: {
            name: "MyMenu",
          },
          extendedFunctionality: function() {
            return "extended functionality";
          }
        });


        kendo.ui.plugin(MyMenu);

        alert('menu extended');


      })(jQuery);

    </script>

  </head>


  <body>

    <div ng-app="app" ng-controller="MyCtrl">

      <p>Telerik Menu with Angular</p>
      <ul kendo-menu k-data-source="menuData" k-rebind="menuData"></ul>
      <p>My extended Menu with Angular</p>
      <ul kendo-my-menu k-data-source="menuData" k-rebind="menuData"></ul>

    </div>

    <p>My extended menu with Kendo only</p>
    <ul id="kendomymenu"></ul>

    <script>
      $("#kendomymenu").kendoMyMenu({
        dataSource: [
          {
            text: "Item 4",   
          },
          {
            text: "Item 5",
          },
          {
            text: "Item 6",
          }
        ],
        select: function () {
          alert(this.extendedFunctionality());
        },
      });


      angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope){

        $scope.menuData = [
          {
            text: "Item 1",   
          },
          {
            text: "Item 2",
          },
          {
            text: "Item 3",
          }
        ];
      })
    </script>
  </body>
</html>

如何让它发挥作用？

Answer 1

菜单是由窗口小部件名称特殊设置的，这就是为什么不分配其数据源的原因。您最好为此创建一个自定义指令：

     .directive("kendoMenuDirective", function() {
        return {
        restrict: "A",
        link: function(scope, element, attr) {
           var dataSource = scope.$eval(attr.kDataSource);
           $(element).kendoMyMenu({
              dataSource: dataSource
           });
        }
      };
  });

以下是您演示的更新版本：http://dojo.telerik.com/@korchev/uNiDe

在Kendo-AngularJS应用程序中扩展Kendo Widget

1 个答案: