Question

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

我们的应用程序有几个＆＃34;模态＆＃34;包含表格的窗户。他们从我们的应用程序中的多个地方开放，并且是独立的。

一个非常简单的例子是：

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是一个承诺。我认为这是一个更好的回调解决方案（例如，你可以将结果纳入承诺链）。

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

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

1 个答案: