腳本未加載角度

Question

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

Answer 1

您可以將它添加到您的資源（在angular.json或angular-cli.json文件中），或者如果可以，可以使用其他導入從main.ts文件中導入它。

然后，您的腳本將全局包含在您的應用中。

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

您可以在專用的Angular GitHub文檔中獲得有關全局腳本的更多信息。

如果您正在使用AngularJS：

有一個類似的帖子：在angular.module之前加載javascript文件，完美地處理它。

Answer 2

將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