How to substitute deprecated replace-property in Angular directives

Question

There used to be a replace-property for directives in Angular, which is now deprecated.

angular.module('myModule')
    .directive('myDirective', myDirectiveCtrl);

function myDirectiveCtrl() {
    return {
        'restrict': 'A',
        'scope': false,
        'replace': true,
        'template': '<span>content</span>',
        'link': function () {}
    };
}

In the template I could use something like this:

<div my-directive></div>

and it would be replaced with this

<span>content</span>

The example might not be the most useful, but I would like to point out the concept.

I already searched on Stackoverflow and Google, but couldn't find an answer. Also, I could not come up with a working solution, therefore I cannot provide solution code.

Question: How to I substitute the replace-property in newer Angular versions?

maurycy · Accepted Answer · 2016-01-08 14:26:52Z

1

That will give you same output as the directive with replace: true

angular.module('myModule')
    .directive('myDirective', myDirectiveCtrl);

function myDirectiveCtrl() {
    return {
        'restrict': 'A',
        'scope': false,
        'template': 'content',
        'link': function () {}
    };
}

HTML

<div><span my-directive></span></div>

Replace true was causing a lot of troubles for developers when all the attributes, scope, had to be shifted to a new element, so the thing now is that you need to plan the DOM and directives different way so you won't use replace

and correct me if I'm wrong but I believe that with that you no longer need a template to contain single root element

previously template required single root element

<div>
  <span></span>
  <p></p>
</div>

now without single root element

<span></span>
<p></p>

answered Jan 8, 2016 at 14:26

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Guido Kitzing Over a year ago

So, there is no real substitution? My use-case involved a <div>-tag with some content, that I wanted to replace with an <a>-tag in some circumstances (using the directive). So now I have to surround my <div>-tag with some other tag and put my directive there to change the content altogether.

maurycy Over a year ago

I have been working past few years on 2 big projects, both were over 20k lines of just JS and I don't recon a case when it was crucial to replace the element. I'd like to know more of your use case - maybe see an example but if depending on a circumstance you need to display different elements then maybe you should use ngIf

Guido Kitzing Over a year ago

In my case it is absolutely possible to change the template as you suggest, of course, but I wanted to achieve, that I only had to add a directive (as an attribute) to the existing template and not make the template more complicated, since I use the directive in multiple positions and those all have different contents (multiple child-elements). Now I would probably have to go with a directive, that either keeps the child-elements (thinking of ng-transclude here) or replaces them altogether, depending on the circumstance.

Ved · Accepted Answer · 2016-01-08 13:45:11Z

0

.directive('myDirective', function()  {
    return {
        'restrict': 'A',
        'scope': false,
        'replace': true,
        'template': '<span>content</span>',
        'link': function () {}
    };
});

HTML

<div my-directive></div>

answered Jan 8, 2016 at 13:45

Ved

2,7012 gold badges24 silver badges30 bronze badges

1 Comment

Guido Kitzing Over a year ago

Ok, I have to use my-directive (changed that in my question). But the point is, that you are still using replace:true which is deprecated.

Collectives™ on Stack Overflow

How to substitute deprecated replace-property in Angular directives

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related