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

Question

我在追求什么

我想为我网页上的图片创建一个ngLoad 指令。这是我的首选标记：

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

我有什么

JSFiddle

现在，我有一个imgLoad 指令，在scope 中指定了ngLoad，如下所示：

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