Javascript 剑道树视图Angularjs上的自定义按钮

我正在尝试在剑道树视图节点中添加多个按钮。我使用模板添加了多个按钮，但未能实现其功能，因为整个节点都在链接中工作。请在下面找到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>

供参考的屏幕截图：

---

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

我试着用你提供的代码来实现这个例子，它似乎工作得很好，请让我知道这是否是你想要的

angular.module（“KendoDemos”[“kendo.directives”]）
.controller（“MyCtrl”，函数（$scope）{
$scope.treeData=new kendo.data.hierarchycalDataSource({
数据：[{
文字：“我的产品”，
项目：[{
正文：“建筑材料”，
项目：[{
正文：“木材与复合材料”
},
{
正文：“成型”
},
{
正文：“干墙”
},
{
正文：“门”
}
]
},
{
文字：“装饰”
},
{
案文：“化学品”
},
{
正文：“硬件”
},
{
文字：“照明和设备”
},
{
文字：“油漆”
},
{
文本：“存储和组织”
},
{
正文：“窗帘”
},
]
},
{
文本：“服务”，
项目：[{
文本：“劳动”
},
{
正文：“安装”
},
{
正文：“搬迁服务”
},
{
正文：“旅行”
},
{
正文：“阶梯”
},
{
文本：“服务呼叫”
},
]
},
{
文字：“折扣”
}
]
});
$scope.click=函数（数据项）{
警报（dataItem.text）；
};
函数makeItem（）{
var txt=kendo.toString（新日期（），“HH:mm:ss”）；
返回{
文本：txt
};
};
$scope.addAfter=函数（项）{
var数组=item.parent（）；
var index=array.indexOf（项目）；
var newItem=makeItem（）；
数组.拼接（索引+1,0，新项）；
};
$scope.adddown=函数（$event）{
$event.stopPropagation（）；
//仅通过修改数据源无法实现此功能
//因此，我们改用tree.append。
var newItem=makeItem（）；
$scope.tree.append（newItem，$scope.tree.select（））；
};
$scope.remove=函数（项，$event）{
//$event.stopPropagation（）；
var数组=item.parent（）；
var index=array.indexOf（项目）；
阵列拼接（索引1）；
$scope.selectedItem=未定义；
};
})

.k-treeview.k-in{
填充物：5px；
}

html{
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
}
树景
{{dataItem.text}
所选：{selectedItem.text}
在下面添加项目
添加子项
删除

我已经在我这边测试了一个类似的场景，它在我的案例中正常工作。这是我的测验。请您检查一下，让我知道您的方案是否不同，或者是否仍然不能正常工作

$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" }
            ]
        });