Angularjs set href does not work from directive

Question

So I wrote a directive that will be applied to link tags like this: <a href="..." replace-link"></a>. What the directive does is check some stuff and then modify/replace/remove the href. It also does some additional stuff, so I do not and can not use ng-href for my purpose.

The directive contains the following code:

myApp.directive('replaceLink', function () {
return {
    link: function (scope, element, attrs) {
        attrs.$set('href', attrs.href + 'REPLACED!');
    }
};
});

but does not seem to work. When changing it to something like

attrs.$set('newhref', attrs.href + 'REPLACED!');

and inspecting the source later, I can see that it worked and the new attribute was set. Why can I not set the "href" attribute?

icyerasor · Accepted Answer · 2015-11-30 13:40:25Z

2

Turns out the issue was that the original html-link to begin with was bound to an angular variable:

<a href="some-link/{{variable}}" replace-link>

applying the directive and binding to the variable (and thus changing the link) are now competing / race conditions.

My solution was to use a different attribute to bind to and have the directive copy from this to the href attribute on demand (only when the link should not be 'unset').

Kinda hard to explain, so I created a jsfiddle to illustrate this a bit more: http://jsfiddle.net/akg7yd4f/3/

answered Nov 30, 2015 at 13:40

icyerasor

5,3021 gold badge48 silver badges58 bronze badges

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

Collectives™ on Stack Overflow

Angularjs set href does not work from directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related