Пользовательские кнопки в дереве дерева Kendo Angularjs

Я пытаюсь добавить несколько кнопок внутри узла дерева дерева Kendo. Я использовал шаблон для добавления нескольких кнопок, но не смог реализовать их функции, поскольку весь узел работает с ссылкой. Ниже вы найдете HTML и JS

HTML

<div kendo-tree-view="tree" k-data-source="treeData" class="hasMenu" k-on-change="selectedItem = dataItem">
    <span k-template>
        {{dataItem.text}} 
        <i class="fa fa-plus" aria-hidden="true"></i>
        <i class="fa fa-trash" aria-hidden="true"></i>
    </span>
</div>

JS

$scope.treeData = new kendo.data.HierarchicalDataSource(
        {
            data: [
             {
                 text: "My Product",
                 items: [
                     {
                         text: "Building Materials",
                         items: [
                             { text: "Lumber & Composites" },
                             { text: "Molding" },
                             { text: "Drywall" },
                             { text: "Doors" }
                         ]
                     },
                     { text: "Decor" },
                     { text: "Chemicals" },
                     { text: "Hardware" },
                     { text: "Lighting & Fixtures" },
                     { text: "Paint" },
                     { text: "Storage & Organization" },
                     { text: "Window Coverings" },
                 ]
             },
             {
                 text: "Service",
                 items: [
                     { text: "Labor" },
                     { text: "Installation" },
                     { text: "Removal Service" },
                     { text: "Travel" },
                     { text: "Ladder" },
                     { text: "Service Call" },
                 ]
             },
             { text: "Discount" }
            ]
        });

Снимок экрана для справки:

Ответ 1

Я проверил аналогичный сценарий на моей стороне, и он работал правильно в моем случае. Вот мое тестовое додзё. Не могли бы вы просмотреть его и сообщить, если ваш сценарий отличается или если он все еще работает неправильно.

Ответ 2

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

Я попробовал реализовать пример с кодом, который вы предоставили, и, похоже, он работает нормально, пожалуйста, дайте мне знать, если это то, что вы ищете!

angular.module("KendoDemos", ["kendo.directives"])
  .controller("MyCtrl", function($scope) {
    $scope.treeData = new kendo.data.HierarchicalDataSource({
      data: [{
          text: "My Product",
          items: [{
              text: "Building Materials",
              items: [{
                  text: "Lumber & Composites"
                },
                {
                  text: "Molding"
                },
                {
                  text: "Drywall"
                },
                {
                  text: "Doors"
                }
              ]
            },
            {
              text: "Decor"
            },
            {
              text: "Chemicals"
            },
            {
              text: "Hardware"
            },
            {
              text: "Lighting & Fixtures"
            },
            {
              text: "Paint"
            },
            {
              text: "Storage & Organization"
            },
            {
              text: "Window Coverings"
            },
          ]
        },
        {
          text: "Service",
          items: [{
              text: "Labor"
            },
            {
              text: "Installation"
            },
            {
              text: "Removal Service"
            },
            {
              text: "Travel"
            },
            {
              text: "Ladder"
            },
            {
              text: "Service Call"
            },
          ]
        },
        {
          text: "Discount"
        }
      ]
    });
    $scope.click = function(dataItem) {
      alert(dataItem.text);
    };

    function makeItem() {
      var txt = kendo.toString(new Date(), "HH:mm:ss");
      return {
        text: txt
      };
    };

    $scope.addAfter = function(item) {
      var array = item.parent();
      var index = array.indexOf(item);
      var newItem = makeItem();
      array.splice(index + 1, 0, newItem);
    };

    $scope.addBelow = function($event) {
      $event.stopPropagation();
      // can't get this to work by just modifying the data source
      // therefore we're using tree.append instead.
      var newItem = makeItem();
      $scope.tree.append(newItem, $scope.tree.select());
    };

    $scope.remove = function(item, $event) {
    //  $event.stopPropagation();
      var array = item.parent();
      var index = array.indexOf(item);
      array.splice(index, 1);

      $scope.selectedItem = undefined;
    };
  })

.k-treeview .k-in {
  padding: 5px;
}

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'; return false;" rel="stylesheet" />
<!DOCTYPE html>
<html>

<head>
  <base href="#" onclick="location.href='https://demos.telerik.com/kendo-ui/treeview/angular'; return false;">
  <style>
    html {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="#" onclick="location.href='https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-material.min.css'; return false;" />
  <link rel="stylesheet" href="#" onclick="location.href='https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.min.css'; return false;" />
  <link rel="stylesheet" href="#" onclick="location.href='https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.mobile.min.css'; return false;" />

  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>


</head>

<body>
  <div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
      <div class="box-col">
        <h4>TreeView</h4>
        <div kendo-tree-view="tree" k-data-source="treeData" k-on-change="selectedItem = dataItem">
          <span k-template>
                     {{dataItem.text}}
                     
        <i class="fa fa-plus" aria-hidden="true" ng-click="addBelow($event)"></i>
        <i class="fa fa-trash" aria-hidden="true" ng-click="selectedItem=dataItem;remove(selectedItem, $event)"></i>
                 </span>
        </div>
      </div>
      <div class="box-col" ng-show="selectedItem">
        <h4>Selected: {{selectedItem.text}}</h4>
        <button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
        <button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
        <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
      </div>
    </div>
  </div>


</body>

</html>