AngularJS - 在渲染所有指令后包含<script>

时间:2016-03-21 23:06:33

标签: javascript angularjs

如果这是一个老问题,请道歉。我花了几个小时寻找答案,但没有运气。

&#xA;&#xA;

我正在尝试将现有(主要是jQuery)应用程序转换为使用AngularJS。我遇到了一个问题,我在index.html中包含的JavaScript文件在包含在我的AngularJS应用程序中时运行得太早了。即使用&lt; script&gt; 标记:

&#xA;&#xA;
 &lt; script type =“text / javascript”src =“/ components /js/theme.js"></script>

这个文件包含很多需要其余部分的jQuery已被渲染为具有效果的页面。那么有没有一种方法可以包含这个脚本并确保它只在页面的其余部分加载完成后加载?我在页面上有一组指令,并且在呈现脚本之前正在加载脚本。

&#xA;&#xA;

更新:

&#xA;&#xA; < p>这是我的index.html的结构:

&#xA;&#xA;
 &lt;!DOCTYPE html&gt;&#xA;&lt; html lang =“en”&gt; &#xA;&lt; head&gt;&#xA;&lt; title&gt; App Title&lt; / title&gt;&#xA;&lt; base href =“/”&gt;&#xA;&#xA;&lt;! -  icons和CSS  - &gt;&#xA;&lt; link href =“/ img / ico / favicon.ico”rel =“快捷图标”&#xA; type =“image / vnd.microsoft.icon”&gt;&#xA;&lt; link href =“/ css / bootstrap.min.css”media =“screen”rel =“stylesheet”&#xA; type =“text / css”&gt;&#xA;&#xA;&lt;! - 外部库 - &gt;&#xA;&lt; script type =“text / javascript”src =“/ external / jquery / dist / jquery.min.js“&gt;&lt; / script&gt;&#xA;&lt; script type =”text / javascript“src =”/ external / angular / angular.js“&gt;&lt; / script&gt;&# xA;&#xA;&lt;! -  Angular Components  - &gt;&#xA;&lt; script type =“text / javascript”src =“/ components / services / ui.js”&gt;&lt; / script&gt; &#xA;&lt; script type =“text / javascript”&#xA; src =“/ components / navigation / js / navigation.js”&gt;&lt; / script&gt;&#xA;&#xA;&lt;! - 应用程序集和配置 - &gt;&#xA;&lt;脚本类型=“text / javascript”src =“/ js / app / app.js”&gt;&lt; / script&gt;&#xA;&lt; script type =“text / javascript”src =“/ js / app / config.js “&gt;&lt; / script&gt;&#xA;&lt; script type =”text / javascript“src =”/ js / app / routes.js“&gt;&lt; / script&gt;&#xA;&lt;! - endbuild  - &gt;&#xA;&#xA;&lt;! - 预编译的HTML模板 - &gt;&#xA;&lt; script type =“text / javascript”src =“/ js / templates.module.js “&gt;&lt; / script&gt;&#xA;&#xA;&lt; / head&gt;&#xA;&#xA;&lt; body ng-cloak&gt; &#XA; &lt;! -  directive  - &gt;&#xA; &LT;顶-NAV杆&GT;&LT; /顶NAV-酒吧&GT;&#XA;&#XA; &lt; div class =“content”&gt;&#xA; &lt; div class =“container”&gt;&#xA; &lt;! -  directive  - &gt;&#xA; &LT;并排NAV-酒吧&GT;&LT; /侧-NAV杆&GT;&#XA;&#XA; &lt;! -  angular view  - &gt;&#xA; &lt; div ng-view&gt;&lt; / div&gt;&#xA; &LT; / DIV&GT;&#XA; &LT; / DIV&GT;&#XA;&#XA; &lt;! -  directive  - &gt;&#xA; &LT; adysis尺&GT;&LT; / adysis尺&GT;&#XA;&#XA; &lt;! -  Bootstrapper  - &gt;&#xA; &lt; script src ='/ js / app.bootstrap.js'type ='text / javascript'&gt;&lt; / script&gt;&#xA;&#xA; &lt;! - 加载页面后需要运行的JAVASCRIPT文件! - &GT;&#XA; &lt; script type =“text / javascript”src =“/ components / js / theme.js”&gt;&lt; / script&gt;&#xA;&lt; / body&gt;&#xA;&lt; / html&gt;&#xA ;  
&#xA;&#xA;

如您所见,“theme.js”文件是&lt; body&gt; 的最后一项。我已在文件中停止以确保它正在加载。但这总是在页面的其余部分呈现之前完成。其他一些JavaScript可能会干扰令人不安的事情吗?请注意,我没有包含所有包含的JavaScript文件。

&#xA;&#xA;

更新2:

&#xA;&#xA;

I已经在我的index.html中看到的指令的JavaScript函数中添加了更多的断点。在执行theme.js之后,它们中的每一个都被停止。我不知道为什么会这样,所以我提到这个,以防它提供更多关于问题的线索。

&#xA;&#xA;

更新3:

&# xA;&#xA;

“theme.js”文件的第一行是:

&#xA;&#xA;
  jQuery(document).ready(function($ )&#xA;  
&#xA;&#xA;

然后该函数包含一系列jQuery选择器来设置事件等等。我的理解是这一点的重点是等到文档加载完毕。但是我的设置中的某些内容,例如Angular,是否会阻止这种情况发生?

&#xA;&#xA;

我尝试将此行更改为:

&#XA;&#XA;
 <代码> angular.element(文件)。就绪(函数($)&#XA;  
&#XA;&#XA ;

虽然这确实导致函数的内容稍后运行,但它仍然不是在整个文档加载之后。

&#xA;

1 个答案:

答案 0 :(得分:1)

确保它位于HTML正文的末尾,而不是标题部分。如果它位于head部分,它将在页面呈现之前加载。