Angular функция 'modalinstance.modal' не является функцией - PullRequest
Новая
       6

Angular функция 'modalinstance.modal' не является функцией

0 голосов
/ 28 января 2020

Я работаю над проектом с файлом .e js. Проблема в том, что функция Angular, которая влияет на модал, не работает и не открывается - для сравнения: с файлом. html она работала нормально и открыла мой модал.

Я получаю эту ошибку :

TypeError: modalinstance.modal не является функцией. (В 'modalinstance.modal (' show ')' 'modalinstance.modal' не определено

Нужен ли мне Angular Импорт для моего файла .e js? 

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">Torsperrung</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            Sie sind dabei ein Tor zu sperren. <br>Falls Sie sich sicher sind, verfassen Sie einen Grund.
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label ">Bemerkung:</label>
            <textarea class="form-control torbemerkung" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary abbrechen" data-index="0" data-dismiss="modal">Abbrechen</button>
        <button type="button" class="btn btn-primary torsperren" data-index="0">Tor sperren</button>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $('#tore').DataTable({
    searching: false,
    bInfo: false,
    paging: false,
    ordering: false
  });

  $('.sperren').each(function() {
    $(this).append('<label class="switch">' +
      '<input type="checkbox" class="sperrung" name="disabled" value="true">' +
      '<span class="slider round"></span>' +
      '</label>'
    );
  });

  $('.slider').change(function() {
    if ($(this).is(':checked')) {
    }
  });

  $('#tore').find('.status').text("in Betrieb");

  // open modal on slide change
  $('input[type="checkbox"]').on('change', function(e) {
    // get index from `tr`
    var index = $(this).parents('tr').data().index;
    if (e.target.checked) {
      var modalinstance = $('#exampleModal');
      // assign index
      modalinstance.find('.torsperren').attr('data-index', index);
      modalinstance.find('.abbrechen').attr('data-index', index);
      // open modal
      modalinstance.modal('show');
      // reset value
      modalinstance.find('.torbemerkung').val('');
    } else {
      // clear data by selecting the row with the given index
      $('#tore').find('tr[data-index="' + index + '"]').find('.bemerkung').text("");
      $('#tore').find('tr[data-index="' + index + '"]').find('.status').text("in Betrieb");
    }
  });

  // textarea example
  $('.torsperren').click(function() {
    var index = $(this).attr('data-index');
    // find element by index and assign the given value
    $('#tore').find('tr[data-index="' + index + '"]').find('.bemerkung').text($('.torbemerkung').val());
    $('#tore').find('tr[data-index="' + index + '"]').find('.status').text("gesperrt");
    $('#exampleModal').modal('hide');
  });

  $('.abbrechen').click(function() {
    var index = $(this).attr('data-index');
    $('#tore').find('tr[data-index="' + index + '"]').find('input[type="checkbox"]').prop('checked', false);
  });
});
...