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

Question

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

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

一个非常简单的示例是：

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

我不确定如何最好地在Angular中处理此问题。 最初，我考虑过将其提供服务，但是其中将包含用于实际表单的模板，等等。

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

指令似乎太复杂了，因为它将控制它在dom中的位置（作为模态，涵盖所有内容），并将具有一些API代码，使我们能够获取/设置一些数据/选项，显示/关闭它，等等。

像这样构建可重复使用的物品的正确方法是什么？

Answer 1

您可以从ui-bootstrap启发（或使用它）

文档： https : //angular-ui.github.io/bootstrap/#/modal

示例： http ： //plnkr.co/edit/？p = preview

创建一个模态窗口：

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

resolve具有与路由器相同的含义-指定控制器本地依赖项。

modalInstance.result是一个承诺。 我认为回调是一个更好的解决方案（例如，您可以将结果包含到promise链中）。

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