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

Question

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:

• angularjs directive call function specified in attribute and pass an argument to it
• AngularJS - Image "onload" event
• AngularJS: introduction to directives and $compile documentation

Any help is much appreciated!

Answer 1

Simple Solution Using Isolate Scope

Thanks to @smk for this answer

Give the directive and the scope property the same name.

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

HTML:

<img img-load="onLoad()">

JSFiddle • AngularJS Guide to Isolate Scopes

While this solution is practical for most situations, it prevents you from using another directive with an isolate scope on the same element. Which brings us to…

More Control Using $parse

Use $parse to process the attributes yourself. The effect will be the same, and there won't be any conflicts with isolate scopes.

app.directive('imgLoad', ['$parse', function($parse) { // Inject $parse
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            var loadHandler = $parse(attr.imgLoad); /* Parse value of
                                                       'imgLoad' attribute */
            element.on('load', function() {
                loadHandler(scope); /* Run the function returned by $parse.
                                       It needs the scope object
                                       to operate properly. */
            });
        }
    };
}]);

HTML (looks the same as before):

<img img-load="onLoad()">

JSFiddle • AngularJS $parse Documentation

Side Note: I didn't use ngLoad because Angular advises against it