角度完成后运行Javascript加载所有视图

我正在使用Angular构建一个Web应用程序,我正在尝试找到一种方法,等待所有data-ng-include元素都已经过评估并且包含完成加载。 例如,菜单是一个加载的视图,每个页面的主要内容也是如此,因此至少有两个data-ng-include被评估和加载。 最重要的是,菜单包含嵌套data-ng-repeat ,它构建了我的菜单。 我需要一种方法来启动脚本,所有这些包括它们内部的任何角度函数,并且DOM已经准备就绪。

当Angular完成页面设置时,是否有任何事件被触发?

AnguarJS的实现是基本的,我们基本上通过使用data-ng-include将其用于模板化。 每个页面都是一个视图(不是角度视图,只是一个html文件),通过data-ng-include加载,页眉和页脚在其上方和下方。 标题还动态加载包含angular的全局视图(同样不是角度视图)html文件。

到目前为止,菜单是使用AngularJS进行模板化以外的任何操作的唯一方法。 它使用它来创建一个菜单,该菜单使用由JSP动态生成并插入从服务器返回的DOM的JSON对象。

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

例如,您可能有

。 在页面加载时,检测到具有data-features元素的每个元素,并加载相关的JS模块,在这种情况下,我们将加载/scripts/modules/subMenu.js

我需要的是一种延迟运行此特征检测和附件的方法,直到包含或包含其他角度函数的所有元素都在页面上并准备好被操作,特别是因为可能存在具有数据特征属性的元素包括。

其他地方的人曾提到将控制器放在身体上并放置任何一面但是:

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

这没用,所以我在这里寻找其他选择。

我最终在这个问题中使用了Theo的解决方案: 当angular.js完成加载时发送事件

我认为合适的答案是否定的。 你必须改变你看待你的应用程序和模型的方式,并使其适应“角度方式”。 最有可能有一种更健康的方式来实现您的需求。 如果您需要将事件附加到元素,可能您可能想要使用指令,但当然我没有足够的信息来判断在这个阶段什么是最好的。

angular.module和指令是一个很好的选择。

这是一个关于如何使用JQUERY插件的plunker演示:

http://plnkr.co/edit/WGdNEM?p=preview

这是一个带有单独文件指令的示例:

http://plnkr.co/edit/YNBSWPLeWqsfGvOTwsMB?p=preview

加载内容:

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

关于要求的内容:

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

我确信这不是正确的方法,但….

将以下函数放在我的视图控制器中,在我的应用程序中加载视图后运行该函数。 我相信该函数在视图加载后的下一个摘要周期中运行(如果错误,请在此处更正),因此在页面形成后运行。

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

在每个视图setTimeouts返回后,您可以通过回调将这些链接在一起和/或使用异步并行库来执行另一个函数。

您可以使用JQuery Promise,并在角度根控制器中实现此承诺。 在角度控制器或jquery代码运行之前设置promise:

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

在角度控制器内部,一切准备就绪后,做

 AppReadyDeferred.resolve(); 

在你的jQuery代码中等待它被解决

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

使用ng-cloak延迟编译前显示的模板。 您还可以将隐藏字段添加为具有ng-cloak的html元素的最后一个子元素(最好在body标签或ng-app启动的任何位置使用它)然后您可以检查是否存在此隐藏元素区间循环

您隐藏的字段部分将是这样的