Directive on ng-repeat not working

Question

I have this directive:

.directive('img', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attr) {
            if (attr.src && attr.type === "extension"){

                var url = "chrome-extension://" + chrome.runtime.id + attr.src
                // console.log(url)

                elem[0].removeAttribute('src')
                // elem[0].setAttribute("src", url)
                // elem[0].dataset.ngSrc = url
                console.log(elem[0])
                console.log(elem[0].src)

            }

        }
    };
})

profile.html:

          <tr ng-repeat="integration in profile.integrations">
             <td>
                  <!-- <h3>{{integration.provider}}</h3> -->
                 <img type="extension" src="/images/icons/{{integration.provider}}.png" alt="" width="50px">
             </td>
         </tr>

My console log still shows the src and does not remove it nor will replace it. It's something to do with ng-repeat because this works on another image perfectly.

Patrick Evans · Answer 1 · 2014-07-26T10:28:02.933

You are basically recreating one of angular's convenience directives that was made for the situation where you use an expression in the src attribute. Use ng-src instead of src, and you won't need your img directive

ng-src doc: https://docs.angularjs.org/api/ng/directive/ngSrc

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

<img type="extension" 
     ng-src="/images/icons/{{integration.provider}}.png" alt="" width="50px">

As noted by runTarm in the comments this does not add the chrome-extension protocol to the image url, to do that you need to do two things

Add chrome-extension to the AngularJS whitelist, otherwise Angular will prepend unsafe: to the url
Add the expression to the ng-src to add the protocol

Adding to the whitelist

//modified from http://stackoverflow.com/a/15769779/560593
var app = angular.module( 'myApp', [] );
app.config( ['$compileProvider', function( $compileProvider ) {   
    //adds chrome-extension to the whitelist
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
]);
app.run(function($rootScope){
    //put the id on the rootScope so we can use it in expression
    $rootScope.extensionUrl = "chrome-extension://"+chrome.runtime.id;        
});

HTML

<img ng-src="{{extensionUrl}}/images/icons/{{integration.provider}}.png" alt="" width="50px">

JSFiddle

This code doesn't check the `type` attribute if it is "extension" then add `chrome-extension://` protocal accordingly. — runTarm, Jul 26 '14 at 09:34
unless other operations are needed to process _extension_ images, that can be added using an additional expression in the src, and the type attribute can be removed — Patrick Evans, Jul 26 '14 at 09:47
It would be better if you could also include an example of using the additional expression instead of `type` attribute. — runTarm, Jul 26 '14 at 09:54
Was adding it right after I mentioned it, answer is updated now. — Patrick Evans, Jul 26 '14 at 10:29

Directive on ng-repeat not working

1 Answers1