AngularJS directive: put a call function in an attribute, without including another attribute

Viewed 30292

What I'm after

I would like to create a ngLoad directive for images on my webpage. This is my preferred markup:

<img ng-src="{{ src }}" ng-load="onLoad()">

What I have

JSFiddle

Right now, I have a imgLoad directive with ngLoad specified in the scope, like so:

var app = angular.module('app', []);

app.directive('imgLoad', [function() {
    return {
        restrict: 'A',
        scope: {
            loadHandler: '&ngLoad'
        },
        link: function (scope, element, attr) {
            element.on('load', scope.loadHandler);
        }
    };
}]);

The resulting markup is:

<img ng-src="{{ src }}" img-load ng-load="onLoad()">

Edit: I previously assumed that the name of the directive (i.e. imgLoad) needed to be different from the name of my attribute (i.e. ngLoad). This is not the case. The solution is to name my directive ngLoad.

What needs to change

I want to get rid of the imgLoad attribute. I want ngLoad to work regardless of any other attributes.

What I've already seen

My implementation is based on:

Any help is much appreciated!

1 Answers
Related