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

【问题标题】：Why are uibmodals only draggable on second call?为什么 uibmodals 只能在第二次调用时拖动？
【发布时间】：2020-02-07 10:39:44
【问题描述】：

我将 .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;
      }
});

所以是的，作为测试，我将模式调用从服务移动到控制器文件，但显示了相同的结果。

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，然后使用完全相同的模式调用后续模式。

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

【问题讨论】：

标签： javascript jquery angularjs jquery-ui jquery-ui-draggable

【解决方案1】：

draggable() 不能正常工作的原因是你在执行$uibModal.open() 之后调用了draggable() 函数。 draggable 应该在你的模态控制器中执行。

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

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

根据TutorialsPoint：

draggable (options) 方法声明一个 HTML 元素可以在 HTML 页面中移动。 options 参数是一个对象，它指定所涉及的元素的行为。

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

【讨论】：