Javascript 使用modals时，HTML无法在angular 4中获取JS文件

我正在为一位摄影师创建一个画廊网站，但我对画廊本身有一个问题

我希望能够单击图像并打开一个模式，通过单击“下一步”和“上一步”可以查看库中的所有图片。
我的问题是，我的HTML无法识别JS文件，也无法读取它。即使我把它放在HTML文件的

标记中

有人有解决办法吗

这是我的密码：

<div class="container">
  <div class="row">

    <div class="col-lg-12">
      <h1 class="page-header">{{title}}</h1>

      <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery">
          <img class="img-responsive" src="https://process.filestackapi.com/A1zigIk7qS7GZogv9QlQGz/resize=w:700/compress/GHTpGIeyTxausxCJYMyR" alt="Short alt text">
        </a>
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
          <img class="img-responsive" src="https://process.filestackapi.com/A1zigIk7qS7GZogv9QlQGz/resize=w:700/compress/GHTpGIeyTxausxCJYMyR" alt="A alt text">
        </a>
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">
          <img class="img-responsive" src="https://process.filestackapi.com/A1zigIk7qS7GZogv9QlQGz/resize=w:700/compress/GHTpGIeyTxausxCJYMyR" alt="Another alt text">
        </a>
      </div>
    </div>


    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="image-gallery-title"></h4>
          </div>
          <div class="modal-body">
            <img id="image-gallery-image" class="img-responsive" src="">
          </div>
          <div class="modal-footer">
            <div class="col-md-2">
              <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
            </div>
            <div class="col-md-8 text-justify" id="image-gallery-caption">
              This text will be overwritten by jQuery
            </div>
            <div class="col-md-2">
              <button type="button" id="show-next-image" class="btn btn-default">Next</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type='text/javascript' src="js/openModal.js"></script>

---

您的问题是在

数据图像

中提供有效的

img

URL

您的代码正在运行

---

如果您将所有这些代码放在JSFIDLE/codepen等中，人们将能够为您提供更多帮助。控制台中出现错误@Louyspatricebesette，控制台中没有错误。单击后，我打开a模式，但图像不显示。在控制台中查看源代码时，我可以看到图像的src没有提供给js文件。@LouySpatriceBesette，好的，那么我该如何使它工作呢？老实说，这是我第一次使用modals和jquery，我不确定我在这里做什么…看起来你的代码在这方面工作。。。但此图像URL失败：。它无法直接访问…非常感谢你，现在有意义了。还有一件事。。我正在使用filestack来托管我的图片，它与modals不兼容吗？除了提供的链接外，还有什么其他方式可以从那里获取图像？使用“共享”链接或。。。他们似乎称之为“交付”链接。它应该是这样的：如果你可以在浏览器中打开链接并查看你的图片（并且只查看你的图片）。这是对的，因为某种原因它不起作用。我可能根本没有连接到javascript文件吗？当我将您的解决方案集成到我的应用程序中时，它没有显示图像。«出于某种原因。。。»可以是任何东西。你希望我怎么回答？你有你的网页的实时链接吗？

$(document).ready(function(){

  loadGallery(true, 'a.thumbnail');

  //This function disables buttons when needed
  function disableButtons(counter_max, counter_current){
    $('#show-previous-image, #show-next-image').show();
    if(counter_max == counter_current){
      $('#show-next-image').hide();
    } else if (counter_current == 1){
      $('#show-previous-image').hide();
    }
  }

  /**
     *
     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
     * @param setClickAttr  Sets the attribute for the click handler.
     */

  function loadGallery(setIDs, setClickAttr){
    var current_image,
        selector,
        counter = 0;

    $('#show-next-image, #show-previous-image').click(function(){
      if($(this).attr('id') == 'show-previous-image'){
        current_image--;
      } else {
        current_image++;
      }

      selector = $('[data-image-id="' + current_image + '"]');
      updateGallery(selector);
    });

    function updateGallery(selector) {
      var $sel = selector;
      current_image = $sel.data('image-id');
      $('#image-gallery-caption').text($sel.data('caption'));
      $('#image-gallery-title').text($sel.data('title'));
      $('#image-gallery-image').attr('src', $sel.data('image'));
      disableButtons(counter, $sel.data('image-id'));
    }

    if(setIDs == true){
      $('[data-image-id]').each(function(){
        counter++;
        $(this).attr('data-image-id',counter);
      });
    }
    $(setClickAttr).on('click',function(){
      updateGallery($(this));
    });
  }
});

<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="[PROVIDE VALID URL HERE]" data-target="#image-gallery">

#image-gallery-image{
  width:100%;
}