Ionic modal and img directive problem

ionic-v1
1

Hi, I have written the following global directive in app.js --> I want to trap all occurrences of img src or img ng-src in my code.

.directive('img', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            console.log ("********** IMG DIRECTIVE ");

        }
    }
})

What I am observing is that this is called every time I load any image in any view, but it does not get called when I load an image inside an ionic modal like this situation:

  <ion-content>
      <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; ">
            <img ng-src="{{loginData.url}}/cgi-bin/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&rate=100&maxfps=5&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" width="100%" />
        </ion-scroll>

The exact same img ng-src called outside of a modal works - i.e. the directive is called.

2

I’ve added a codepen

Click on “Open Modal” and the directive won’t be called when the image is loaded
Click on the “CLICK HERE TO SEE IMAGE AND DIRECTIVE” link on the homepage and the directive is called

3

Solved the problem – the directive was being called, but during controller load, not during modal show because I was pre-instantiating it.