javascript - 为什么 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() 内部调用 Controller 文件中的 modalService:

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

是的，作为测试，我将模式调用从服务移至 Controller 文件，但显示了相同的结果。

Controller 文件中的 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 开发工具上调试它，它首先调用 jquery-ui-draggable，随后调用模式完全相同。

有没有办法让模态框在第一次调用时就已经可以拖动了？为什么您认为它在第一次调用时不起作用？

Answer 1

draggable() 无法正常运行的原因是因为您在执行 $uibModal.open()< 后调用了 draggable() 函数。可拖动对象应在您的模态 Controller 内执行。

首先，您可以像这样删除 draggable() 函数的参数。

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

根据 TutorialsPoint :

The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved.

其次，您必须在 WARNING_CONTROLLER.js 中传输 $timeout 函数并将其从您的 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 () { });
}