jquery-ui - AngularJS 嵌套模式对话框

Question

我正在将使用类似 Oracle 表单的技术创建的大型 CRUD 业务应用程序移植到 Web(HTML5/AngularJS/RESTful-web-services)。

设置业务逻辑的部分方式取决于模式对话框的可用性，显示 CRUD 网格。首先，用户...

单击网格中的一行

在行的第一个字段中输入数据

回车

光标被发送到右边的下一个字段

等

他们编辑其他字段，等等

他们点击页面上某处的“保存”

发生验证，调用 Web 服务 -> DATA STORED。

我已经通过 AngularUI 的 ng-grid 构建了该部分。

下一步是我偶然发现的地方:

双击网格的行，会出现一个新的 MODAL 对话框，显示“详细网格”。

您可以从网格中编辑/删除/等任何内容，也可以再次双击网格行，然后会出现另一个新的 MODAL 对话框，显示“详细信息网格”。等等。

当我通过 Angular UI 的 $dialog 服务尝试此操作时，我很快就遇到了墙 - 嵌套 $dialog 的 (e.g. see this issue on the GitHub repos) 存在很多问题，更令人担忧的是，他们最近(2 个月前)决定干脆放弃旧对话，因为它有太多问题， and rewrite it from scratch .

我对任何 Angular 开发人员的问题是，你如何处理嵌套的模态对话框？您是否使用其他库 - 例如jQueryUI 的对话框？如果是这样，您如何“以 Angular 方式”使用它们？即没有在你的 Controller 中混合 DOM 处理？我试过 follow the example of another SO question它确实有效，但它将对话框的 HTML 嵌入到页面的部分中 - 这并不好(例如，想象必须在所有 Angular 中嵌入通过 F1 显示的帮助对话框的所有 HTML 代码(“显示键盘快捷键对话框”) HTML模板部分!

我正在考虑通过 $http 加载对话框模板(如 Angular UI 对话框)并通过 ngInclude 注入(inject)内容，但这意味着我必须在我的 DOM 中为它们保留一个占位符('#dialogPlace' 或其他东西) - 和因为我有可能无限的嵌套“深度”来处理，恐怕我将不得不自己编写“堆栈处理”代码，一路添加 DOM 元素。天知道这本身会导致什么...

我真的很喜欢 Angular，但我的问题域需要一个用于嵌套模式对话框的可靠工作组件。我希望有人遇到过这个问题，并且有一个干净的、类似 Angular 的解决方案......

Answer 1

由于无法使用“正在重建”的 AngularUI 的对话框服务来解决这个问题，我使用了 jQueryUI 的对话框(它没有任何关于模态生成模态的问题......)，并创建了一种“迷你框架”我自己的。我所做的很多工作都是基于 AngularUI 对话框的来源，它似乎工作正常。

这是我编码的 Angular 服务( typescript 代码，所以它有一些类型规范 - 但否则是纯 Javascript)。由于它会产生模态对话框，我将服务称为“柏拉图”:-)

...

export function addNewServices(application:ng.IModule) {
    application.factory('Plato', ['$http', '$compile', function($http, $compile) {
        return {
            showDialog: function(scope, strTile:string, templateUrl:string, dialogOptions, callback) {
                scope.dialogOptions = dialogOptions;
                scope.dialogOptions.callback = callback;
                $http.get(
                    templateUrl,
                    {timeout:globals.timeoutInMs, cache:false}
                ).success(function(response, status, header, config) {
                    var newDialogId = Sprintf.sprintf("npInnerDlg%d", globals.dialogCounter);
                    globals.dialogCounter += 1;
                    var modalEl = angular.element('<div id="' + newDialogId + '">');
                    modalEl.html(response);
                    $('body').append(modalEl);
                    $compile(modalEl)(scope);
                    var component = $('#' + newDialogId);
                    scope.dialogOptions.jquiDialog = component;
                    component.dialog({
                        autoOpen:false,
                        modal:true,
                        title:strTile
                    });
                    component.dialog("open");
                }).error(function(data, status, header, config) {
                    document.body.style.cursor  = 'default';
                    if (status == 406) {
                        console.log("Received 406 for:" + header + " # " + config);
                        alert("Received 406 from web service...");
                    } else {
                        console.log("Status:" + status);
                        console.dir(config);
                        alert("Timed-out waiting for data from server...");
                    }
                });

            }
        };
    }]);
}

...并像这样使用它:

首先，要显示对话框的调用代码:

var dialogOptions = {
    callback: function() {
        if (dialogOptions.result !== undefined) {
            cust.mncId = dialogOptions.result.whateverYouWant;
        }
    },
    result: {}
};

Plato.showDialog(
    $scope,
    'Choose something...',
    '/static/partials/municipalityLOV.html',
    dialogOptions
}

像往常一样使用 Angular Controller 和指令的 HTML 部分模板:

<div data-ng-controller="controllerMunicipalitiesLOV">
    <div data-ng-grid="..."
    ...

和模态对话框 Controller 具有这样的处理程序:

var dialogOptions = $scope.$parent.dialogOptions;
$scope.close = function(result) {
    dialogOptions.result.whatever = ....;
    dialogOptions.jquiDialog.dialog("close");
    dialogOptions.callback();
}; 

我基本上传递给showDialog:

调用者的范围，我存储传递的“dialogOptions”

对话标题

对话框的 HTML 模板

.result

中的对话框传入和传出内容的“dialogOptions”

“dialogOptions”还包含一个回调

委婉地说，这个设计是一个完整的 hack，但它确实有效:我使用调用者的范围来存储 dialogOptions，在对话框的 Controller 中，我使用 $scope.$parent.dialogOptions 来读取来自调用者的传入内容，并存储回调将读取的任何结果(“dialogOptions”充当两个范围之间的桥梁)。

至少截至 2013 年/7 月，这是我发现/破解的唯一 Angular-y 方式来创建可以以嵌套方式生成的模式对话框(例如，controllerMunicipalitiesLOV Controller 依次调用 showDialog，另一个 Controller 再次调用它， ETC)。

我希望我知道一种将“dialogOptions”作为附加参数传递给模态对话框 Controller 的方法 - 不幸的是，我并不精通 Angular 内部；最欢迎任何帮助(它会使这个界面更干净)。

希望这可以帮助某人。