Script not loaded in angular

Question

My javascript class is loaded before the render of my page. So the querySelectorAll return 0.

How to load my class after the Angular render ?

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);

Are you using angularjs (1) or angular (2+)? Looks like angularjs — David
– David, Commented Jun 17, 2019 at 9:16
@tonymx227 I edited my answer, you may find your answer given to your Angular version. — Maxime
– Maxime, Commented Jun 17, 2019 at 10:02

Adrita Sharma · Accepted Answer · 2019-06-17 09:12:51Z

0

Keep the js file in assets folder and then include in in angular.json in scripts array:

      "scripts": [
          "src/assets/gloveboxLibraries.min.js"
       ]

answered Jun 17, 2019 at 9:12

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxime · Accepted Answer · 2019-06-17 10:01:41Z

0

You maybe can add it to your assets (in the angular.json or angular-cli.json file), or if you can, import it from the main.ts file with other imports.

Then your script will be included globally to your app.

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

You can get more informations about global scripts in the dedicated Angular GitHub doc.

If you're using AngularJS:

There is a similar post: Load javascript files before angular.module that deals with it perfectly.

edited Jun 17, 2019 at 10:01

answered Jun 17, 2019 at 9:12

Maxime

2,2641 gold badge23 silver badges41 bronze badges

Collectives™ on Stack Overflow

Script not loaded in angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related