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

Question

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

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

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

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

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

例如,你可能有<div id="mySubMenu" data-features="subMenu"></div>.在页面加载时,检测到具有data-features元素的每个元素,并加载相关的JS模块,在这种情况下我们将加载/scripts/modules/subMenu.js.

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

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

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

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

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

Answer 1

在内容加载:

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

关于要求的内容:

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

Answer 2

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

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

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

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

Answer 3

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

Angular.module 和指令是一个很好的探索选择。

这是一个关于如何将两者与 JQUERY 插件一起使用的 plunker 演示：

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

这是一个在单独文件上包含指令的示例：

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