由于无法使用“正在重建”的 AngularUI 的对话框服务来解决这个问题，我使用了 jQueryUI 的对话框（它没有任何关于模态生成模态的问题......），并创建了一种“迷你框架”我自己的。我所做的很多工作都是基于 AngularUI 对话框的来源，它似乎工作正常。
这是我编写的 Angular 服务（打字稿代码，所以它有一些类型规范 - 但不是纯 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
}
像往常一样使用角度控制器和指令的 HTML 部分模板：
<div data-ng-controller="controllerMunicipalitiesLOV">
<div data-ng-grid="..."
...
和模态对话框控制器具有这样的处理程序：
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，在对话框的控制器中，我使用 $scope.$parent.dialogOptions 来读取来自调用者的传入内容，并存储回调将读取的任何结果（“dialogOptions”充当两个范围之间的桥梁）。
至少截至 2013/7 月，这是我发现/破解的唯一 Angular-y 方式来创建可以以嵌套方式生成的模态对话框（例如，controllerMunicipalitiesLOV 控制器依次调用 showDialog，另一个控制器再次调用它， ETC）。
我希望我知道一种将“dialogOptions”作为附加参数传递给模态对话框控制器的方法 - 不幸的是，我并不精通 Angular 内部；最欢迎任何帮助（它会使这个界面更干净）。
希望这可以帮助某人。