Inserting a directive from another directive's compile function

Question

I want to dynamically insert the <confirmation> element in the DOM from the updater directive. (I have it setup to tap into an event, which it does in my real app) I just need that element inserted and then it'll have the same functionality (as defined in it's respective directive).

Some background: I've tried appending the element and then using the $compile service - $compile(element)(scope), but I think $compile inside a directive's compile function doesn't work. and appending without $compile gives it no angular bindings.

Here's an updated Plnkr: http://plnkr.co/edit/OyBTYGTkMtxryFdDRwQN?p=preview

anyway I can do that? any help would be deeply appreciated even if it's pointing me to the right directon.

Answer 1

You don't need to use the compile property of the Directive Definition Object in the appender directive. You just need the $compile service to compile a new <confirmation> element.
Furthermore, you might want to specify the properties of the isolate scope (i.e. message and/or state):

.directive('appender', function ($compile) {
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            elem.after($compile('<confirmation message="..."></confirmation>')(scope));
        }
    };
});

See, also, this short demo.

---

UPDATE:

Based on your comments, it is obvious you do not understand the concepts of compiling and linking. Although, you think you are using the compile property, in fact all you need is the linking function. I strongly suggest you take a closer look at the docs regarding the Directive Definition Object.

return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {
        scope.$watch('items', function(val, oldVal) {
            if (val === oldVal) { return; }
            element.after($compile('<confirmation message="..."></confirmation>')(scope));
        }, true);
    }
};

See, also, this other short demo.

---

UPDATE 2:

Since you are so insistent on compiling from the other directive's compile function,
here is the code:

return {
    restrict: 'A',
    compile: function () {
        var compiled = $compile('<confirmation message="..."></confirmation>');
        return function postLink(scope, elem, attrs) {
            scope.$watch('items', function(val, oldVal) {
                if (val === oldVal) { return; }
                elem.after(compiled(scope));
            }, true);
        };
    }
};

and here is the demo.