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

Question

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

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

一个非常简单的例子是:

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

我不确定如何在 Angular 中最好地处理这个问题。起初我考虑将其作为一项服务，但这会有实际表单的模板等。

我考虑过使用路线，这样我就可以立即拥有 Controller /模板组合，但我需要在当前页面上打开此内容，而不需要任何 iframe。

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

构建这样的可重用项目的正确 Angular 方式是什么？

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 与路由器中的含义相同 - 指定 Controller 局部依赖项。

modalInstance.result 是一个 promise 。我认为这是一个比回调更好的解决方案(例如，您可以将结果纳入 promise 链)。

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