AngularJS - Включить <script> после того, как все директивы были обработаны

Question

AngularJS - Включить <script> после того, как все директивы были обработаны

0

Извините, если это старый вопрос. Я потратил несколько часов на поиски ответа, но мне не повезло.

Я пытаюсь преобразовать существующее (прежде всего jQuery) приложение для использования AngularJS. Я столкнулся с проблемой, когда файл JavaScript, который я включаю в index.html, запускается слишком рано, когда включается в мое приложение AngularJS. т.е. с помощью <script>:

<script type="text/javascript" src="/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="/bootstrap.min.css" media="screen" rel="stylesheet"
    type="text/css">

<!-- External Libraries -->
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/angular.js"></script>

<!-- Angular Components -->
<script type="text/javascript" src="/ui.js"></script>
<script type="text/javascript"
    src="/navigation.js"></script>

<!-- App set and config -->
<script type="text/javascript" src="/app.js"></script>
<script type="text/javascript" src="/config.js"></script>
<script type="text/javascript" src="/routes.js"></script>
<!--  endbuild -->

<!--  Precompiled HTML templates -->
<script type="text/javascript" src="/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='/app.bootstrap.js' type='text/javascript'></script>

    <!-- JAVASCRIPT FILE WHICH NEEDS TO RUN AFTER PAGE HAS LOADED! -->
    <script type="text/javascript" src="/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.element(document).ready(function($)

и в то время как это приводит к содержанию функции, которая будет запущена позже, она все еще не после загрузки всего документа.

eebsie 22 март 2016, в 00:58

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

James O'Toole · Accepted Answer · 2016-03-21T22-31-00.000Z

Удостоверьтесь, что это в конце вашего тела HTML, а не в разделе заголовка. Если он находится в разделе главы, он будет загружаться до отображения страницы.

Спасибо за это. Однако я уже попробовал это, и это не имело никакого значения. Я добавлю обзор моего index.html, чтобы увидеть, может ли это дать какие-то дополнительные сведения о том, почему он идет не так. Большое спасибо за любую дополнительную помощь ....
@eebsie Попробуйте добавить defer в качестве атрибута для вызова скрипта? w3schools.com/tags/att_script_defer.asp