剑道树上的自定义按钮查看Angularjs

Question

我正在尝试在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" }
            ]
        }); 

屏幕截图供参考：

Answer 1

我在我身边测试了一个类似的场景，它在我的情况下正常运行。这是我的测试dojo。如果您的方案不同或者它仍然无法正常工作，请您查看它并告诉我。

Answer 2

我查看了kendo UI treeview的文档，请查看here还有一个在上面相同链接中实现按钮的工作示例。

我尝试使用您提供的代码实现示例，它似乎工作正常，如果您正在寻找，请告诉我们！

＆＃13;

＆＃13;

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;
    };
  })

＆＃13;

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

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>

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

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

＆＃13;

＆＃13;

＆＃13;