Скрипт не загружен в угловой - PullRequest
0 голосов
/ 17 июня 2019

Мой класс javascript загружается перед визуализацией моей страницы. Так что querySelectorAll возврат 0.

Как загрузить мой класс после рендера Angular?

page.ejs

<body ng-app="GestiawebApp">
  <script src="myclass.js"></script>
  <!-- ng repeat <a href="#" data-dialog="true">....-->
</body>

myclass.js

+(function($) {

'use strict';

document.addEventListener('DOMContentLoaded', function() {

  var buttons = document.querySelectorAll('[data-dialog="true"]');

  Array.prototype.forEach.call(buttons, function(btn) {
    btn.addEventListener('click', function(e) {
      var link = e.currentTarget,
          url = link.getAttribute('href'),
          messageText = link.getAttribute('data-dialog-message') || 'Êtes-vous sûr ?',
          btnClass = (link.getAttribute('data-dialog-danger')) ? 'is-danger' : 'is-main-color',
          actionTitle = link.getAttribute('data-dialog-action-title') || 'Valider',
          dialogNode, lightNode;

      lightNode = document.createElement('div');
      lightNode.classList.add('is-dark-light');
      document.body.appendChild(lightNode);

      $(lightNode).fadeIn();

      dialogNode = document.createElement('div');
      dialogNode.classList.add('dialog');
      document.body.appendChild(dialogNode);
      dialogNode.innerHTML = '<p>' + messageText + '</p><div class="space-20"></div><div class="flexline is-full has-margin no-mobile"><a class="btn" type="reset">Annuler</a><a data-loader="true" class="btn ' + btnClass + '" type="submit">' + actionTitle + '</a></div>';

      $(dialogNode).fadeIn();

      e.preventDefault();

      dialogNode.querySelector('[type="submit"]').addEventListener('click', function() {
        window.location.href = url;
      });

      dialogNode.querySelector('[type="reset"]').addEventListener('click', function() {
        $(lightNode).fadeOut( function() {
          lightNode.remove();
          $(dialogNode).fadeOut( function() {
            dialogNode.remove();
          });
        });
      });
    });
  });




});

})(jQuery);

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Сохраните файл js в папке assets , а затем включите его в angular.json в массиве scripts:

      "scripts": [
          "src/assets/gloveboxLibraries.min.js"
       ]
0 голосов
/ 17 июня 2019

Вы можете добавить его в свои активы (в файле angular.json или angular-cli.json) или, если можете, импортировать его из файла main.ts с другими операциями импорта.

Затем ваш скриптбудет включено в ваше приложение глобально.

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "src/assets/scripts/myclass.js"
]

Более подробную информацию о глобальных сценариях вы можете получить в выделенном Angular GitHub doc .

Если вы 'Вы используете AngularJS:

Есть похожий пост: Загружайте файлы javascript перед angular.module , который прекрасно с этим справляется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...