CODEWITHSUNDEEP
angularjs
Ben Foster
Ben Foster

Reputation: 34830

How to override image source within a directive

I want to override an image src within a directive. I've tried the following, none of which work.

app.directive('imgTransform', function () {
    return {
        retrict: 'A',
        link: function (scope, elem, attrs) {
            elem.attr('ng-src', 'foo');
            attrs.ngSrc = 'foo';
            elem.attr('src', 'foo');
            attrs.src = 'foo';

        }
    };
});

Does the link function execute before the DOM binding takes place?

I also tried creating an isolate scope and binding to the ngSrc attribute:

    scope: {
        src: '@ngSrc'  
    },

Then setting scope.ngSrc in the link function. This did not work either.

Am I missing something?

http://jsfiddle.net/benfosterdev/y7JE9/

Upvotes: 0

Views: 1091

Answers (1)

user1364910
user1364910

Reputation:

You need to modify it before you get to your linking function.

I'd suggest in the controller function, as opposed to digging to deep into the $compiler. 

    restrict: "A",
    controller: function ($scope, $element, $attrs) {
        $attrs.$set('ngSrc', 'someOtherValue');
    },
    link: function (scope, el, attrs) {...}

Here's a fiddle: http://jsfiddle.net/y7JE9/5/

Also, use $observe when looking up interpolated values in your link function. Good luck : )

Upvotes: 1

Related Questions