AngularJS Directive property: Replace deprecated - Equivalent?

Question

So AngularJs are deprecating the Replace property of a directive. reference

context:

  .directive('myDir', function($compile) {
    return {
      restrict: 'E',
      template: '<div>{{title}}</div>'
    }
  });

this will ouput:

<my-dir>
   <div> some title </div>
</my-dir>

So, Replace would replace <my-dir></my-dir> with the template. What is the equivalent these days? Or is it just to use a directive with restrict: 'A'.

I created this:

  .directive('myDir', function($compile) {
    return {
      restrict: 'E',
      template: '<div>{{title}}</div>',
      link: link
    };

    function link(scope, iElem, IAttr, ctrl, transcludeFn) {
      var parent = iElem.parent();
      var contents = iElem.html();

      iElem.remove();

      parent.append($compile(contents)(scope));
    }
  });

which will output:

<div> some title </div>

Answer 1

Basic equivalent to replace: true is

app.directive('directive', function () {
  return {
    ...
    link: function postLink(scope, element, attrs) {
      element.replaceWith(element.contents());
    }
  };
});

However, there are side effects that you can easily spot. Bindings are still there but attributes from the directive won't be translated into the template.

Luckily, there is usually no reason for this unless conditional replace is required. replace is considered deprecated for Angular 2 as you already noticed (it doesn't fit into web components concepts) but is perfectly fine for 1.x.

Answer 2

Docs appear to be outdated - replace for directives is not being removed.

Source