AngularJS组件中的onload图像事件

Question

我正在使用如下定义的角度1.5组件。

ngModule.component('devStudioImage', {
    template: '<img id= "{{$ctrl.imageName}}" ng-src="{{$ctrl.source}}"/>',
    controller: Controller,
    bindings: {
        imageName: '@',
        imageHeight: '<',
        imageWidth: '<',
        imageDescription: '<?',
        imageLoaded: '&'
    }
});

我想在加载图像时绑定一个加载事件，但onload似乎不起作用，而我似乎找到的每个其他解决方案都涉及制定一个指令。

有没有办法在此组件中捕获该load事件，或者如果我必须使用指令，如何为组件使用相同的控制器实例？

编辑：

我最终这样做了。我认为这很难看，感觉......很脏，但它确实有效。

除了上面的组件之外，我还添加了一个指令，它适用于父作用域，用于ng-show的变量。

ngModule.directive('imageOnLoad', function() {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.bind('load', function() {
                scope.$parent.$ctrl.loaded = true;
                scope.$parent.$apply();
            });

        }
    }
})

Answer 1

对于这样的事情，我会使用指令而不是组件。直接来自AngularJS文档：

何时不使用组件：

- 对于依赖于DOM操作，添加事件侦听器等的指令，因为编译和链接功能不可用

Answer 2

您可以在控制器中尝试：

var element = $element.find('imgID');
    element.on('load', function() {
    alert("image is loaded");
});

首先获取image元素，然后将load事件附加到它。

Answer 3

你应该使用一个指令。但是如果你真的不想这样做，因为你使用的是Angular，你已经拥有了jquery。 Jquery有一个加载函数。

当.load事件和所有子元素已完全加载时，会将该事件发送给该元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

文档可以在这里找到：https://api.jquery.com/load-event/