Directive with 'replace: true' and template duplicates classes in the attrs parameter of the link fn

[jstrength]

When I create a directive with a template that has a class attribute and replace: true. The attrs parameter in the link function duplicates the classes. They are also duplicated when I look at the element in the HTML.

This appears to only happen when the tag that the directive is replacing also has a class attribute.

Here is some example code, along with the output I see in the console.

<test class="btn-block"></test>

directive("test", function () {
        return {
            restrict: 'E',
            replace: 'true',
            link: function(scope, element, attrs) {
                console.log(attrs);
            },
            template: '<div class="center-block"></div>'
        };
    })

[caitp]

replace: true will merge attribute values from the compiled node into the root of the replaced node.

If this is not what you want, you need to manually remove the merged class.

There is currently no way around this. Technically replace has been deprecated, so I wouldn't expect to see new changes to the directive API which allow you to prevent certain attributes from being merged.

So, just to sum up, this is basically doing what it's expected to do, even if it's inconvenient, and we probably can't change it in 1.x (this will be totally different in 2.0.0). But you can work around this by manually adjusting attributes.

@IgorMinar is this a WONTFIX or do you think it would make sense to make some changes to this? As a classic example of the problems with merging attributes, SVG will often throw when we do that, so maybe we should offer some way to avoid merging. I am not really expecting us to, but I can see how it would be useful.

[jeffbcross]

@caitp, @jstrength is referring to the fact that the "center-block" class is repeated twice on the class attribute, where it should only be there once.

[caitp]

@jeffbcross I understood that, it's a byproduct of the way our attribute merging works. If we detect that the attribute is there, we append to it with a preceding space. So, if the attribute is both in the directive template and the calling template, it shows up twice.

There are a lot of other silly things that happen because of this (There was one where using id in the template and caller caused the replaced ID to be like id="foo: " (would be id="foo: {{id}}" except id was not in scope). I can't remember the issue # for that one, but I think it's been closed.

I think this is just one of those silly things with repeat: true. We can't really do much about it unless it's okay to make huge breaking changes. and there is a limit to how much we can actually do about it (eg, replacing class=... / ng-class=... or SVG attributes or style=...... always problematic)

[caitp]

#6979 #6239, there are probably more of these open (including this one), but there are too many to go through right now while I make dinner!

I can't recall the number or title of the one I'm thinking of, but yeah this is basically the main issue people run into with replace: true, the way caller attributes are merged into the newly created node.

[reneras]

I've made a plunker to validate it still exists in 1.3.0 and it does. I will create a PR in a lil bit.

[reneras]

@jstrength seems like the element itself doesn't have the duplicate classes ( also according the element.classList ). The duplicates only show up in the console.
How does it manifest itself in your application ?