Расширение виджета Kendo в приложении Kendo-AngularJS

Я пытаюсь получить мой расширенный виджет Kendo для работы с AngularJS.Расширение виджета Kendo в приложении 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>

Любые рекомендации о том, как получить его на работу будут оценены.

С уважением,

источник

2015-08-14 Stefan Rafael

меню находится специальный обсаженной по имени виджета, и именно поэтому его источник данных не назначен. Лучше создать пользовательскую директиву для этого:

 .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

источник

2015-09-02 13:40:21

Спасибо Корчеве –

Расширение виджета Kendo в приложении Kendo-AngularJS

ответ

Смежные вопросы