文章/答案/技术大牛

发布

社区首页 >问答首页 >在Kendo-AngularJS应用中扩展Kendo Widget

问在Kendo-AngularJS应用中扩展Kendo Widget
EN

Stack Overflow用户

提问于 2015-08-14 10:13:51

回答 1查看 700关注 0票数 4

我正在尝试让我的扩展的Kendo与AngularJS一起工作。

对于Kendo，只有我的扩展小部件工作得很好，您可以从下面的代码中看到，但是用角度看就不会了。

这是我的代码：http://dojo.telerik.com/AbeZO/7

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

怎么才能让它起作用？

javascript

jquery

angularjs

kendo-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-02 13:40:21

菜单是以小部件名称作为特殊大小写的，这就是为什么没有分配它的数据源。您最好为此创建一个自定义指令：

     .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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32007634

复制

相似问题

问在Kendo-AngularJS应用中扩展Kendo Widget
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Kendo-AngularJS应用中扩展Kendo WidgetEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Kendo-AngularJS应用中扩展Kendo Widget
EN