Question

我使用了第三方JavaScript应用程序的功能，我在其中一个AngularJS工厂中包含并调用它。此函数的一个参数是DOM元素的id，因为该函数操作此元素。

ThirdPartyApp.doSomething("#elementId").then(function (success) {

                    }, function (error) {

                    });

但是我收到错误：无法获取带有ID的元素

我认为应用程序使用document.getElementById，因为我尝试手动调用它，但即使它根据浏览器的DOM浏览器存在，它也找不到该元素。

带有id的元素位于HTML页面中，我通过ng-include包含。

如何在AngularJS环境中解决此问题，因为我无法改变第三方应用的工作方式？

更多信息

这是带有元素的html页面：

<div>
    <iframe id='testId' ng-src='{{test}}' style='overflow: hidden;' />
</div>

以下是我如何包含此html页面：

<ng-include src="'/views/shared/test.html'"></ng-include>

为什么AngularJS工厂中的document.getElementById("testId")找不到iframe元素？

Answer 1

由于我无法看到您正在使用的第三方库的源代码，因此很难准确说出这里可能会发生什么。

但是，我的猜测是，当您调用iframe元素时，添加ng-include的模板尚未完成加载内容。

要验证这一点，请尝试通过将以下内容添加到AngularJS控制器来获取元素：

$scope.$on('$includeContentLoaded', function () {
    var myTest = document.getElementById("testId");
});

此代码块将等待您的“ng-included”内容呈现。