AngularJS指令：在一个属性中放置一个调用函数，不包含另一个属性

Question

我在追求什么

我想在我的网页上为图片创建一个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能够正常工作。

我已经看过

我的实施基于：

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

非常感谢任何帮助！

Answer 1

使用隔离范围的简单解决方案

感谢@smk获得此答案

赋予指令和范围属性相同的名称。

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

虽然此解决方案适用于大多数情况，但它会阻止您在同一元素上使用具有隔离范围的另一个指令。这带给我们......

使用$ 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（看起来和以前一样）：

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

JSFiddle •AngularJS $parse Documentation

旁注：我没有使用ngLoad因为Angular advises against it