Directive corner property: Replace obsolete - equivalent?

Question

So, AngularJs invalidates the Replace property of the directive. link

context:

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

it will be:

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

So, Replace will replace <my-dir></my-dir> with template . What is equivalent these days? Or just use the 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

Documents look outdated - replace for directives is not deleted.

A source

Answer 2

The base equivalent of 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 detect. Bindings still exist, but attributes from the directive will not be translated into the template.

Fortunately, there is usually no reason for this unless a conditional replace is required. replace is considered obsolete for Angular 2, as you already noticed (it does not fit into the concepts of web components), but it works great for 1.x.