AngularJS directive to add content after element and trigger element click - angularjs

Question

I'm trying to create a very simple directive to ask confirmation on a button click.
The following html:
<button kr-confirm>Delete</button>
Should compile into:
<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>
I wanted to handle this in templateUrl, but could not find an option to add template after element.
I ended up adding DOM in link function and calling element.on('click') but this doesn't seem to work.
Based on HTML and anticipated result, how would I go about implementing this?
Best case would be if it could be solved with templateUrl.
See my current fiddle:
https://jsfiddle.net/kraaness/4rn8ycb3/

Answer 1

You should create a component that will provide you with the desired functionality. See a quick <confirmation-button> component below.
angular.module('app', [])
.component('confirmationButton', {
bindings: {
onConfirm: '&'
},
template: '<button ng-click="$ctrl.confirm = true">Delete</button>' +
'<div ng-show="$ctrl.confirm">Are you sure?' +
'<button ng-click="$ctrl.onConfirm(); $ctrl.confirm = false">Yes</button>' +
'<button ng-click="$ctrl.confirm = false">No</button></div>'
})
.run(function($rootScope) { // using $rootScope just for sake of the demo
$rootScope.delete = function() {
alert("Oh no!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="app">
<confirmation-button on-confirm="delete()"></confirmation-button>
</div>