在Angular加载完所有视图后运行Javascript

我正在使用Angular构建一个web应用程序，我正在尝试找到一种方法，等待所有

数据ng include

元素都被评估并完成include加载。例如，菜单是一个加载的视图，每个页面的主要内容也是如此，因此至少有两个

data ng include

s被评估和加载。除此之外，菜单include还有嵌套的

data ng repeat

s，用于构建我的菜单。我需要一种方法，在所有这些include和其中的任何角度函数都已加载并且DOM实际上已经准备好之后启动脚本

Angular完成页面设置后是否会触发任何事件

AnguarJS的实现是基本的，我们基本上是通过使用数据ng include将其用于模板化。每个页面都是一个视图（不是角度视图，只是一个html文件），通过data ng include加载，页眉和页脚位于其上下。标头还动态加载包含角度视图的全局视图（同样不是角度视图）html文件

到目前为止，菜单是唯一使用AngularJS进行模板以外的任何操作的东西。它使用JSP动态生成并插入到从服务器返回的DOM中的JSON对象创建菜单

为了让前端人员的生活更轻松，任何重复的JavaScript功能都被编码到模块中，这些模块在页面加载时被检测到，并使用JavaScript功能需要附加到的元素上的data features属性动态加载

例如，您可能有

。在页面加载时，会检测到每个具有data features元素的元素，并加载关联的JS模块，在本例中，我们将加载

/scripts/modules/subMenu.JS

我需要的是一种延迟运行此功能检测和附件的方法，直到包含或其他角度函数生成的所有元素都在页面上并准备好进行操作，特别是因为这些包含中可能有具有数据功能属性的元素

其他地方有人提到在身体上安装控制器，除了：

$scope.$on('$viewContentLoaded', function() {
    // Init Features Here
});

这不起作用，所以我在这里寻找其他选择

---

在这个问题上，我最终同意了西奥的解决方案：

我认为恰当的答案是否定的。你必须改变你看待应用程序和模型的方式，并使其适应“角度方式”。最有可能的是有一种更健康的方式来实现你所需要的。

---

如果需要将事件附加到元素，可能需要使用指令，但我没有足够的信息在此阶段判断什么是最好的

angular.module和指令是一个很好的探索选项

下面是一个plunker演示，介绍如何在JQUERY插件中同时使用这两种工具：

下面是一个单独文件上带有指令的示例：

---

使用ng-Clope延迟编译前显示的模板。您还可以添加一个隐藏字段作为具有ng斗篷的html元素的最后一个子元素（最好在body标记中或ng应用程序启动的任何位置使用它），然后您可以在间隔循环中检查此隐藏元素的存在

您的隐藏字段部分如下所示

<div ng-include="'ngtplhidden'"></hidden>
<script type="text/ng-template" id="ngtplhidden">
<span id="elemidToCheckInAnIntervalFunc"></span>
</script>

---

加载内容时：

$rootScope.$on('$includeContentLoaded', function() {
    //do your will
});

请求的内容：

$rootScope.$on('$includeContentRequested', function() {
    //...
});

---

我确信这不是正确的方法，但是

将下面的函数放入我的视图控制器，在视图加载到我的应用程序后运行该函数。我相信该函数是在视图加载之后的下一个摘要周期中运行的（如果错误，请在此处更正），因此它会在页面形成后运行

setTimeout(function(){
  //do this after view has loaded :)
  console.log('success!');
}, 0);

---

在每个视图SetTimeout返回后，您可以通过回调将它们链接在一起，和/或使用异步并行库执行另一个函数。

您可以使用JQuery承诺，并在angular root控制器内实现这一承诺。在angular controller或jquery代码运行之前设置承诺：

var AppReadyDeferred = $.Deferred();
var AppReadyPromise = AppReadyDeferred.promise();

在你的角度控制器内，一切准备就绪后，执行以下操作

AppReadyDeferred.resolve();

在jQuery代码中等待它被解析

window.AppReadyPromise.done(() => {
  // Angular is ready to go!;
});

---

您可以尝试使用

document.onreadystatechange

document.onreadystatechange = x => {
    console.log('ready!');
}

---

最好的答案是否定的。你必须改变你看待应用程序和模型的方式，并使其适应“角度的方式”。最有可能的是，有一种更健康的方式来实现您所需要的功能，而在加载页面元素之后，将传统JavaScript功能附加到页面元素的“角度方式”到底是什么（这基本上就是我在这里要问的）？如果您需要将事件附加到元素上，您可能希望使用指令，但我没有足够的信息在这一阶段判断什么是最好的。更新解释并添加更多细节以帮助您回答问题。您需要指令。。。任何相反方向的尝试都会延迟您找到正确答案的时间。此方法仍然要求我拥有一个包含所有指令的文件，并在每次加载页面时加载该文件。我需要一种方法将每个指令保存在一个单独的文件中，并根据需要动态加载它。每个指令可以是一个单独的文件，这实际上是我在开发过程中的做法。下面是一个例子：最后一个难题是能够动态加载它们，这样它们就不会全部加载到每个页面上。我相信这是构建合法角度应用程序的前进方向。我真的需要一些东西，让我混合我的应用程序之间的传统和角度。非常感谢您的帮助。@StephenRios我很高兴我能帮上忙。这并不能完全满足我的需要，但这是一个很好的工具。谢谢。所以在这种情况下，我应该使用$timeout（角度包装器版本）而不是setTimeout fyiNot。这里的问题是