在 Angular 加载完所有视图后运行 Javascript [英] Run Javascript AFTER Angular Has Finished Loading All Views

问题描述

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

I am building a web application using Angular, and I am trying to find a way to wait until all of the data-ng-include elements have been evaluated and the includes finished loading. For instance the menu is a view that is loaded, as is the main content for each page, so at the very least there are two data-ng-includes that get evaluated and loaded. On top of that the menu include has nested data-ng-repeats that build out my menu. I need a way to initiate script AFTER all of these includes and any angular functions inside them have been loaded and the DOM is ACTUALLY ready.

当 Angular 完成页面设置时，是否会触发任何事件?

Is there any event that gets fired when Angular has finished setting up the page?

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

The implementation of AnguarJS is basic and we are basically using it for templating via use of data-ng-include. Each page is a view (not an angular view, just an html file), loaded via data-ng-include, with the header and footer above and below it. The header also dynamically loads a global view (again not an angular view) html file that includes angular.

到目前为止，除了模板之外，菜单是唯一使用 AngularJS 的东西.它使用 JSP 动态生成并插入到从服务器返回的 DOM 中的 JSON 对象来创建菜单.

So far the menu is the only thing using AngularJS for anything other than templating. It uses it to create a menu using a JSON object that is dynamically generated by JSP and inserted into the DOM that is returned from the server.

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

In order to make life easier for the front-end guys, any kind of repeated JavaScript functionality is coded out into modules, which are detected on page load and loaded dynamically using a data-features attribute on the element the JavaScript functionality needs to be attached to.

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

For instance, you may have <div id="mySubMenu" data-features="subMenu"></div>. On page load, each element with a data-features element is detected, and the associated JS module loaded, in this case we would load /scripts/modules/subMenu.js.

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

What I need is a way to delay running this feature detection and attachment until all of the elements resulting from an include or other angular function are on the page and ready to be manipulated, especially since there may be elements with data-features attributes inside those includes.

其他地方有人提到在身体上放一个控制器，但什么都不放:

Someone elsewhere had mentioned putting a controller on the body and putting nothing side of it but:

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

那没有用，所以我在这里寻找其他选择.

That did not work, so I am here looking for other options.

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

I ended up going with Theo's solution in this question: Sending event when angular.js finished loading

推荐答案

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

I think the appropiate answer is NO. You have to change the way you are looking at your app and Model and adapt it to the "angular way". Most likely there is a healthier way to achieve what you need. If you need to attach events to elements probably you may want to use a directive but of course I do not have enough information to judge at this stage what is best.

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

angular.module along with directives is a good option to explore.

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

Here is a plunker demo on how to use both with a JQUERY plug in:

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

以下是一个在单独文件中包含指令的示例:

Here is a an example with a directive on a separate file:

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

这篇关于在 Angular 加载完所有视图后运行 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！