Javascript 在剑道AngularJS应用程序中扩展剑道小部件

我正在尝试让我的扩展剑道小部件与AngularJS一起工作

对于剑道，只有我的扩展小部件工作得很好，你会从下面的代码中看到，但是对于Angular，它不会

这是我的代码：

剑道菜单扩展
（函数（$）{
var MyMenu=window.kendo.ui.Menu.extend({
init：函数（元素、选项）{
window.kendo.ui.Menu.fn.init.call（这个，元素，选项）；
},
选项：{
名称：“我的菜单”，
},
扩展功能：function（）{
返回“扩展功能”；
}
});
插件（MyMenu）；
警报（“菜单扩展”）；
})（jQuery）；
带角度控制的Telerik菜单


我的扩展菜单有角度


我的扩展菜单只有剑道


$（“#kendomymenu”）。kendomymenu({
数据源：[
{
案文：“项目4”，
},
{
案文：“项目5”，
},
{
案文：“项目6”，
}
],
选择：函数（）{
警报（this.extendedfunctionary（））；
},
});
angular.module（“app”、[“kendo.directives”]）.controller（“MyCtrl”，函数（$scope）{
$scope.menuData=[
{
案文：“项目1”，
},
{
案文：“项目2”，
},
{
案文：“项目3”，
}
];
})

---

如何使其工作？

该菜单按小部件名称的大小写进行了特殊设置，这就是它的数据源未分配的原因。您最好为此创建一个自定义指令：

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

以下是您的演示的更新版本：

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