Директива AngularJS: поместить функцию вызова в атрибут, не включая другой атрибут

Что я после

Я хотел бы создать директиву ngLoad для изображений на моей веб-странице. Это моя предпочтительная разметка:

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

Что у меня

JSFiddle

Прямо сейчас у меня есть директива imgLoad с ngLoad, указанная в scope, например:

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);
        }
    };
}]);

Полученная разметка:

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

Изменить: Ранее я предполагал, что имя директивы (т.е. imgLoad) должно отличаться от имени моего атрибута (т.е. ngLoad). Это не тот случай. Решение состоит в том, чтобы называть мою директиву ngLoad.

Что нужно изменить

Я хочу избавиться от атрибута imgLoad. Я хочу, чтобы ngLoad работал независимо от каких-либо других атрибутов.

Что я уже видел

Моя реализация основана на:

Любая помощь очень ценится!

Простое решение с использованием изолированной области

Благодаря @smk за этот ответ

Дайте директиве и свойству scope одно и то же имя.

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()">

Хотя это решение практически применимо для большинства ситуаций, оно не позволяет использовать другую директиву с областью выделения для одного элемента. Это подводит нас к...

Больше управления использованием $parse

Используйте $parse для обработки атрибутов самостоятельно. Эффект будет таким же, и конфликтов с изолированными областями не будет.

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 (выглядит так же, как и раньше):