如果这是一个老问题，我深表歉意。我花了几个小时寻找答案，但没有运气。
我正在尝试将现有(主要是 jQuery)应用程序转换为使用 AngularJS。我遇到了一个问题，即我包含在 index.html 中的 JavaScript 文件在包含在我的 AngularJS 应用程序中时运行得太早。即通过使用 <script>标签:
<script type="text/javascript" src="/components/js/theme.js"></script>
该文件包含大量 jQuery，需要渲染页面的其余部分才能产生效果。那么有没有一种方法可以包含此脚本并确保它仅在页面的其余部分完成加载后才加载？我在页面上有一组指令，并且在渲染这些指令之前正在加载脚本。
更新:
这是我的index.html的结构:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App Title</title>
<base href="/">
<!-- icons and CSS -->
<link href="/img/ico/favicon.ico" rel="shortcut icon"
type="image/vnd.microsoft.icon">
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet"
type="text/css">
<!-- External Libraries -->
<script type="text/javascript" src="/external/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/external/angular/angular.js"></script>
<!-- Angular Components -->
<script type="text/javascript" src="/components/services/ui.js"></script>
<script type="text/javascript"
src="/components/navigation/js/navigation.js"></script>
<!-- App set and config -->
<script type="text/javascript" src="/js/app/app.js"></script>
<script type="text/javascript" src="/js/app/config.js"></script>
<script type="text/javascript" src="/js/app/routes.js"></script>
<!-- endbuild -->
<!-- Precompiled HTML templates -->
<script type="text/javascript" src="/js/templates.module.js"></script>
</head>
<body ng-cloak>
<!-- directive -->
<top-nav-bar></top-nav-bar>
<div class="content">
<div class="container">
<!-- directive -->
<side-nav-bar></side-nav-bar>
<!-- angular view -->
<div ng-view></div>
</div>
</div>
<!-- directive -->
<adysis-footer></adysis-footer>
<!-- Bootstrapper -->
<script src='/js/app.bootstrap.js' type='text/javascript'></script>
<!-- JAVASCRIPT FILE WHICH NEEDS TO RUN AFTER PAGE HAS LOADED! -->
<script type="text/javascript" src="/components/js/theme.js"></script>
</body>
</html>
如您所见，“theme.js”文件是<body>的最后一项。 。我已在文件中停止以确保它正在加载。但这总是在页面的其余部分呈现之前完成。是否有其他 JavaScript 会干扰一些令人不安的事情？请注意，我没有包含所有正在包含的 JavaScript 文件。
更新2:
我在 JavaScript 函数中为您可以在我的 index.html 中看到的指令添加了更多断点。它们中的每一个都在 theme.js 执行后停止。我不知道为什么会这样，所以我提到这一点是为了提供有关问题的更多线索。
更新3:
“theme.js”文件的第一行是:
jQuery(document).ready(function($)
然后该函数包含一长串 jQuery 选择器来设置事件等。我的理解是这一行的重点是等待文档加载。但我的设置中可能有一些东西，例如Angular，正在阻止这种情况发生吗？
我尝试将此行更改为:
angular.element(document).ready(function($)
虽然这确实导致函数的内容稍后运行，但在整个文档加载之后仍然没有运行。
最佳答案
确保它位于 HTML 正文的末尾而不是 header 部分。如果它位于 head 部分，它将在页面呈现之前加载。
关于javascript - AngularJS - 在所有指令渲染后包含 <script>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36143294/