Changing attribute binding to third party directive in angularjs

Question

I am trying to change the attribute that is passed in to the third party directive md-icon. I tried by delegating, but the value does not change.

So far this is what I have.

angular.module('app').decorator('mdIconDirective', function ($delegate) {
let directive = $delegate[0];
let compile = directive.compile;

directive.compile = function(el, attrs) {
    let link = compile.apply(this, arguments);

    return function(scope, el, attrs) {
        let src = `node_modules/@mdi/svg/svg/${attrs.mdSvgSrc}.svg`;
        el[0].setAttribute('mdSvgSrc', src);

        link.apply(this, arguments)
    };
};

return $delegate;
});

I want to change the value passed in md-svg-src so that I don't have to write the full path every time.

georgeawg · Accepted Answer · 2019-11-21 18:05:29Z

0

I want to change the value passed in md-svg-src so that I don't have to write the full path every time.

You may not want to make separate HTTP requests for every icon, so you can bundle your SVG icons together and pre-load them with $mdIconProvider as an icon set. An icon set can also be given a name, which acts as a namespace for individual icons, so you can reference them like "social:cake".

app.config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
      .defaultIconSet('node_modules/@mdi/svg/svg/core-icons.svg', 24);
});

This technique can be used to avoid using the full path each time.

<md-icon md-svg-icon="social:android" aria-label="android "></md-icon>

For more information, see

edited Nov 21, 2019 at 18:05

answered Nov 21, 2019 at 17:55

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

1 Comment

Bjane Brønnbu Over a year ago

I appreciate your reply, but I really need to know how to manupulate an attribute binding before it's sent to the 3rd party directive. Thanks

Collectives™ on Stack Overflow

Changing attribute binding to third party directive in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related