脚本未加载角度

Question

My javascript class is loaded before the render of my page. 我的javascript类在我的页面渲染之前加载。 So the querySelectorAll return 0 . 所以querySelectorAll返回0 。

How to load my class after the Angular render ? 如何在Angular渲染后加载我的类？

page.ejs page.ejs

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

myclass.js 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);

Answer 1

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. 您可以将它添加到您的资源（在angular.json或angular-cli.json文件中），或者如果可以，可以使用其他导入从main.ts文件中导入它。

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 . 您可以在专用的Angular GitHub文档中获得有关全局脚本的更多信息。

If you're using AngularJS: 如果您正在使用AngularJS：

There is a similar post: Load javascript files before angular.module that deals with it perfectly. 有一个类似的帖子：在angular.module之前加载javascript文件，完美地处理它。

Answer 2

Keep the js file in assets folder and then include in in angular.json in scripts array: 将js文件保存在assets文件夹中，然后将其包含在scripts数组中的angular.json中：

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

脚本未加载角度

问题描述

2 个解决方案

解决方案1
0 2019-06-17 09:12:50

解决方案2
0 2019-06-17 09:12:51

脚本未加载角度

问题描述

2 个解决方案

解决方案1 0 2019-06-17 09:12:50

解决方案2 0 2019-06-17 09:12:51

解决方案1
0 2019-06-17 09:12:50

解决方案2
0 2019-06-17 09:12:51