img 加载事件未触发

Question

我必须遵循我正在尝试为 img 标签设置 onload 侦听器的指令。在该链接函数中，我以编程方式生成 img src。

angular.module('test', [])
.directive('imgTest', function() {
  return {
    restrict: 'A',
    template: '<img ng-src="{{imgSrc}}"></img>',
      link: function(scope, elem) {
      elem.on('load', function() {
        console.log('image loaded');
      });

      scope.imgSrc = "someurl?token=" + getAccessToken();  
    }
  };
});

但是 onload 函数没有触发。请放轻松，我确定我在做一些非常愚蠢的事情:)

Answer 1

“elem”不是图像。如果你像下面这样使用你的指令，

<div img-test />

elem 是“div”而不是图像

Answer 2

elem.on('load') 是一个 jQuery 风格的事件监听器。看起来你没有像 elem 这样的 jQuery 对象——它直接来自 Angular。所以试试：

$(elem).on('load', function () {})

或

elem.addEventListener('load', function() {});