AngularJS指令在元素后添加内容并触发元素单击

我正在尝试创建一个非常简单的指令，在单击按钮时请求确认

以下html：

<button kr-confirm>Delete</button>

删除

应汇编成：

<button kr-confirm>Delete</button>
<span ng-show="vm.isOpen"> 
   Are you sure?
   <span class="btn btn-sm btn-danger">Yes</span>
   <span class="btn btn-sm btn-secondary">No</span>
</span>

删除
你确定吗？
对
不

我想在

templateUrl

中处理这个问题，但找不到在元素之后添加模板的选项

最后，我在

link

函数中添加了DOM，并调用了

元素

基于HTML和预期结果，我将如何实现这一点

最好的情况是使用
templateUrl
解决

看我现在的小提琴：

您应该创建一个能够为您提供所需功能的组件。请参阅下面的快速
组件


angular.module（'app'，[]）
.组件（“确认按钮”{
绑定：{
onConfirm:“&”
},
模板：“删除”+
“你确定吗？”+
“是的”+
“不”
})
.run（函数（$rootScope）{//仅为了演示而使用$rootScope
$rootScope.delete=函数（）{
警惕（“哦，不！”）；
}
});
您应该创建一个能够为您提供所需功能的组件。请参阅下面的快速
组件


angular.module（'app'，[]）
.组件（“确认按钮”{
绑定：{
onConfirm:“&”
},
模板：“删除”+
“你确定吗？”+
“是的”+
“不”
})
.run（函数（$rootScope）{//仅为了演示而使用$rootScope
$rootScope.delete=函数（）{
警惕（“哦，不！”）；
}
});

我正在使用1.6.x-很抱歉造成混淆。JS Fiddle指定了错误的版本我不清楚为什么您放弃了一个标准模板，它应该简单地替换您的指令元素（而不是附加到它）。这是我最初的尝试，但无法让它工作。我想传递主元素的所有属性。但是，当指令被替换时，所有属性都被复制到根元素。JS Fiddle指定了错误的版本我不清楚为什么您放弃了一个标准模板，它应该简单地替换您的指令元素（而不是附加到它）。这是我最初的尝试，但无法让它工作。我想传递主元素的所有属性。但是，当指令被替换时，所有属性都被复制到根元素。我的问题不完整，这是基于给定信息的公认答案。非常感谢。我的问题不完整，根据给出的信息，这是公认的答案。非常感谢。