AngularJs ng-repeat 中的 iframe 加载事件
Posted
技术标签:
【中文标题】AngularJs ng-repeat 中的 iframe 加载事件【英文标题】：Iframe load event inside an AngularJs ng-repeat 【发布时间】：2019-10-31 23:54:31 【问题描述】：我正在尝试创建一个指令，以便在加载 ng-repeat 内的 iFrame 时进行一些元素操作。
下面的 CodePen 在 ng-repeat 的内部和外部都包含一个 iframe。指令初始化没有问题，但加载事件永远不会触发。
var app = angular.module('tester', []);
app.directive('iframeOnload', [function()
return
scope:
callBack: '&iframeOnload'
,
link: function(scope, element, attrs)
alert("Directive Init")
element.on('load', function()
alert("Load Event Fired")
return scope.callBack();
)
])
app.controller('MainCtrl', function($scope)
$scope.tester1 = function ()
alert("Testing 1")
$scope.tester2 = function ()
alert("Testing 2")
$scope.theTemplate = [
Id: 1,
ElementId: 99,
Content: 'Element1',
ElementHeight: 130,
,
Id: 2,
ElementId: 98,
Content: 'Element2',
ElementHeight: 320,
,
Id: 3,
ElementId: 2,
Content: 'Element3',
ElementHeight: 320,
];
);
.
<body ng-controller="MainCtrl">
<iframe iframe-onload="tester2()"></iframe>
<ul>
<li ng-repeat="element in theTemplate" id="li_element.Id" style="position: relative; height:element.ElementHeightpx;">
<iframe iframe-onload="tester1()" scrolling="no" frameborder="0" style="width: 100%; height:element.ElementHeightpx;" id="iframeElementelement.Id"></iframe>
element.Content
</li>
</ul>
</body>
https://codepen.io/jibber4568/pen/agZxgP
非常感谢任何指针。
【问题讨论】：
【参考方案1】：您可以为此使用 angular element ready 方法。请尝试以下方法。
app.directive('iframeOnload', [function()
return
scope:
callBack: '&iframeOnload'
,
link: function(scope, element, attrs)
alert("Directive Init")
element.ready(function()
alert("Load Event Fired")
return scope.callBack();
)
])
【讨论】：
【参考方案2】：这是因为你没有使用 jQuery，因此 AngularJs 使用它自己的 jqLite，来自 docs。
on() - 不支持命名空间、选择器或 eventData
你可以在 DOM 节点上使用原生的addEventListener，所以你的链接函数会是这样的：
link: function (scope, $element, attrs)
console.log('Directive Init');
var element = $element[0];
element.addEventListener('load', function ()
console.log('Load Event Fired');
return scope.callBack();
, once: true );
【讨论】：
以上是关于AngularJs ng-repeat 中的 iframe 加载事件的主要内容，如果未能解决你的问题，请参考以下文章
ng-repeat angularJS 中的 ng-repeat
AngularJs 使用自定义 Json 中的 ng-repeat 创建表