AngularJS - 在所有指令呈现后包含<脚本>

AngularJS - Include <script> after all directives have rendered

本文关键字：包含 脚本 指令 AngularJS      更新时间：2023-09-26

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

我正在尝试将现有的（主要是jQuery）应用程序转换为使用AngularJS。 我遇到了一个问题，即我包含在索引中的JavaScript文件.html在包含在我的AngularJS应用程序中时运行得太早。即通过使用<script>标签：

<script type="text/javascript" src="/components/js/theme.js"></script>

这个文件包含很多jQuery，需要呈现页面的其余部分才能产生影响。 那么有没有办法可以包含此脚本并确保仅在页面的其余部分完成加载后加载它？ 我在页面上有一组指令，并且在呈现这些指令之前正在加载脚本。

更新：

这是我的索引结构.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>

如您所见，"主题.js"文件是<body>的最后一项。 我已经在文件中停止以确保它正在加载。 但这总是在页面的其余部分呈现之前完成的。 其他一些JavaScript会干扰令人不安的事情吗？ 请注意，我没有包含所有包含的 JavaScript 文件。

更新 2：

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

更新 3：

"theme.js"文件的第一行是：

jQuery(document).ready(function($)

然后该函数包含一长串 jQuery 选择器来设置事件等等。 我的理解是，这一行的重点是等到文档加载完毕。 但是我的设置中的某些东西，例如 Angular，会阻止这种情况发生吗？

我尝试将此行更改为：

angular.element(document).ready(function($)

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

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

相关文章：