AngularJS: Insert template after element and trigger show on click

Question

I've created this Plnkr to show what I've started:

http://plnkr.co/edit/LzcbPMqqiQbFjVzw4kDO?p=preview

Two questions:

1. How do get angular to leave the original button in place and insert the template after it, instead of inserting the template as a child of the button?

2. How do I get the directive to only be applied on an event? When the button is clicked for example?

I thought I could use another attribute to specify the event e.g. ctx-trigger="click" and then in the compile function do element.bind(attr['ctxTrigger'],...) but that didn't work.

Answer 1

How do get angular to leave the original button in place and insert the template after it, instead of inserting the template as a child of the button?

You can't.

How do I get the directive to only be applied on an event? When the button is clicked for example?

I think you can add the matching class (ie with ng-class), it should pick it up if you have restrict: 'C'.

Answer 2

As additional to @user1737909 answer:

How do I get the directive to only be applied on an event? When the button is clicked for example?

You can use ng-show or ng-hide option to manage view