Javascript 创建可重用的模态对象/模板系统

我们正在使用Angular 1.2重写一个应用程序，我正在尝试确定创建可重用对话框的常规方法

我们的应用程序有几个包含表单的“模式”窗口。它们在我们的应用程序中从多个位置打开，并且是独立的

一个非常简单的例子是：

var userDialog = new app.Dialogs.EditUser({
  user_id: 1,
  save: function(){
    // callback stuff
  }
});
userDialog.show();

我不确定如何最好地处理这个问题。起初我想把它变成一个服务，但这会有用于实际表单的模板，等等

我考虑使用一个路由，这样我就可以立即拥有一个控制器/模板组合，但我需要在当前页面上打开此内容，而不需要任何iFrame

对于一个指令来说，它似乎太复杂了，因为它将控制自己在dom中的位置（作为一个模式，涵盖所有内容），并且将有一些API代码，让我们获取/设置一些数据/选项，显示/关闭它，等等

---

构建这样一个可重用项目的正确方法是什么

您可以从ui引导（或使用它）中获得灵感

文件：

例如：

创建模式窗口：

  var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

“解析”与“路由器-指定控制器本地依赖项”中的含义相同

结果就是承诺。我认为回调是一个更好的解决方案（例如，您可以将结果纳入承诺链）

---

可以看看ui引导模式是如何实现的：我有，但这些都是假设页面上有占位符元素的指令。在这种情况下，我希望以编程方式创建一个实例并显示它，我不希望页面上的现有元素对此起作用。您可以以编程方式创建/实例化引导ui模态，并使用解析传递需要在模态中显示的任何数据。

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});