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

查看:150
本文介绍了运行JavaScript后角已完成加载所有视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我建立采用了棱角分明的Web应用程序,而我试图找到一种方法,等到所有的数据-NG-包括元素进行了评估和包括完成加载。例如菜单是加载的视图,是每个页面的主要内容,因此最起码有两个数据-NG-包括 S中的得到评估和装载。更重要的是菜单包括嵌套顶部数据-NG-重复 S中的打造出了我的菜单。我需要一种方法来启动脚本后,所有这些,包括和他们里面的任何角度的功能已经被加载和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.

有角时,已完成设置页面被解雇无论如何?

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

AnguarJS的实现是基本的,我们通过使用基本使用它的模板数据-NG-包括。每个页面都是一个视图(不是角度来看,只是一个HTML文件),通过加载的数据-NG-包括与页眉和页脚上方和下方。头部还动态加载的全局视图(不再次角视图),其中包括角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功能为codeD伸到模块,这些模块在页面加载检测并加载动态使用数据功能元素属性的JavaScript功能需要连接到。

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.

例如,你可能有< D​​IV ID =mySubMenu数据功能=子菜单>< / DIV> 。在页加载,用数据的功能元件的每个元件被检测,并且相关联的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.

我结束了西奥在这个问题的解决会:<一href=\"http://stackoverflow.com/questions/14968690/sending-event-when-angular-js-finished-loading\">Sending事件时angular.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=$p$ PVIEW

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

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

http://plnkr.co/edit/YNBSWPLeWqsfGvOTwsMB?p=$p$ PVIEW

这篇关于运行JavaScript后角已完成加载所有视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆