javascript - AngularJS 组件中的 onload 图像事件

Question

我使用的是如下定义的 Angular 1.5 组件。

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

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

有没有办法捕获此组件中的加载事件，或者如果我必须使用指令，如何为我的组件使用相同的 Controller 实例？

编辑:

我最终做到了这一点。我觉得它很丑，而且感觉……很脏，但它确实有效。

除了上面的组件之外，我还添加了一个指令，该指令应用于 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 文档:

When not to use Components:

-for directives that rely on DOM manipulation, adding event listeners etc, because the compile and link functions are unavailable