Javascript AngularJS指令：将调用函数放在一个属性中，而不包括另一个属性 我在追求什么

我想为我的网页上的图像创建一个

ngLoad

指令。这是我的首选标记：

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

生成的标记是：

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

编辑：我之前假设指令的名称（即

imgLoad

）需要与属性的名称（即

ngLoad

）不同。事实并非如此解决方案是将我的指令命名为

ngLoad

需要改变什么 我想去掉

imgLoad

属性。我希望无论任何其他属性如何，

ngLoad

都能正常工作

我已经看到的 我的实施基于：

• AngularJS:还有

非常感谢您的帮助

使用隔离作用域的简单解决方案 谢谢你的回答

为指令和范围属性指定相同的名称

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

HTML:

HTML（看起来和以前一样）：

•

---

旁注：我没有使用ngLoad，因为它不起作用吗？为什么是两条指令？@smk我想你回答了我的问题。我假设指令的名称需要与scope属性不同。因此，考虑到OP的假设，这个问题没有意义。我仍然认为这个问题是一个很好的参考，特别是对于那些刚刚开始写指令的人（比如我）。我更新了我的原始帖子来解释我的假设。我想@smk把他的评论写进一个答案中。如果这几天内没有发生，我可能会回答我自己的问题，相信他的解决方案我正在尝试你的代码，但loadhandler从未被调用。。

是否开启

加载事件发生？

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

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

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

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