Почему uibmodals можно перетаскивать только на второй звонок?

Question

Я поместил .draggable () на мои модалы, но они работают только на вторых вызовах. Модалы вызываются из служебного файла.

Служебный файл:

function callWarningModalService(data) {
  var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: vm.constants.WARNING,
    controller: vm.constants.WARNING_CONTROLLER,
    backdrop: vm.BACKDROP,
    resolve: {
       params: function () {
          return data;
        }
    }
  });

  $timeout(function () {
    $(".modal-content").draggable({ handle: ".modal-header" });
  }, 10);

  return modalInstance;
}

Внутри callWarning (), вызывающий modalService в файле контроллера:

modalService.callWarningModalService(vm.params).result.then(function (data) {
   if (data !== vm.constants.CANCEL) {
      vm.isDocumentAction = data;
      }
});

Так что в качестве теста я переместил модальный вызов изслужба для файла контроллера, но были показаны те же результаты.

Внутри callWarning () в файле контроллера

modal.message = vm.constants.WARNING_MESSAGE;
var modalInstance = $uibModal.open({
  animation: true,
  templateUrl: vm.constants.WARNING,
  controller: vm.constants.WARNING_CONTROLLER,
  backdrop: vm.BACKDROP,
  resolve: {
     params: function () {
        return modal;
      }
  }
});

$timeout(function () {
  $(".modal-content").draggable({ handle: ".modal-header" });
}, 10);

modalInstance.result.then(function () { });

Я попытался отладить его на инструментах Chrome Dev, и он вызывает jquery-ui-переключение при первом и последующих модальных вызовах с одинаковыми шаблонами.

Есть ли способ, чтобы модалы уже были перетаскиваемыми при первом вызове? Как вы думаете, почему это не сработает при первом звонке?

Answer 1

Причина, по которой draggable() не работает должным образом, заключается в том, что вы вызвали функцию draggable() после выполнения $uibModal.open(). Draggable должен выполняться внутри вашего модального контроллера.

Сначала вы можете удалить аргумент вашей draggable() функции следующим образом.

$timeout(function () {
  $(".modal-content").draggable();
}, 10);

Согласно TutorialsPoint :

Метод draggable (options) объявляет, что HTML-элемент может быть перемещен на HTML-странице. Параметр options - это объект, который определяет поведение задействованных элементов.

Во-вторых, вы должны передать функцию $timeout в WARNING_CONTROLLER.js и удалить ее из функции callWarning(). Ваша callWarning() функция должна выглядеть следующим образом

function callWarning()
{
     modal.message = vm.constants.WARNING_MESSAGE;
     var modalInstance = $uibModal.open({
         animation: true,
         templateUrl: vm.constants.WARNING,
         controller: vm.constants.WARNING_CONTROLLER,
         backdrop: vm.BACKDROP,
         resolve: {
             params: function () {
                 return modal;
             }
         }
     });

     modalInstance.result.then(function () { });
}