Avoid using extra DOM nodes when using nginclude

Question

I\'m struggling to wrap my mind around how to have an ng-include not use an extra DOM element as I\'m building an angular app from a plain-HTML demo. I\'m working with pretty sl

Answer 1

Some of the other answers suggest replace:true, but keep in mind that replace:true in templates is marked for deprecation.

Instead, in an answer to a similar question, we find an alternative: It allows you to write:

Custom Directive:

app.directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: 'A', /* optional */
        link: function (scope, el, attrs) {
            el.replaceWith(el.children());
        }
    };
});

(cut'n'paste from the other answer)