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/

AngularJS组件中的onload图像事件

3 个答案: