为什么 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;
}

在调用 Controller 文件中的 modalService 的 callWarning() 内部：

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 开发工具上对其进行调试，它首先调用 jquery-ui-draggable，随后的模态调用具有完全相同的模式。

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

Answer 1

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

首先，您可以像这样删除 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.

其次，您必须将 $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 () { });
}

为什么 uibmodals 只能在第二次调用时拖动？

Why are uibmodals only draggable on second call?

javascript

jquery

jquery-ui

jquery-ui-draggable

angularjs