0

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/

Ben Foster
  • 34,340
  • 40
  • 176
  • 285
  • You should compile it like http://stackoverflow.com/questions/21804311/how-to-set-ng-disabled-inside-directive/21804745#21804745 – Whisher Feb 17 '14 at 12:25

1 Answers1

1

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 : )