Вложенные модальные диалоги AngularJS

Поскольку не было никакого способа решить эту проблему с помощью диалоговой службы 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 с использованием контроллеров и директив angular, как обычно:

<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-шаблон диалога
• "dialogOptions", где вещи передаются в диалог и из него в .result
• "dialogOptions" также содержит обратный вызов

Дизайн - это, мягко говоря, полный взлом, но он работает: я использую область действия вызывающего для хранения dialogOptions, а внутри контроллера диалогового окна я использую $ scope. $ Parent.dialogOptions, чтобы читать входящие данные от вызывающего, и сохраните любые результаты, которые будет считывать обратный вызов («dialogOptions» действует как мост между двумя областями действия).

По крайней мере, по состоянию на 2013 год / июль, это единственный способ Angular-y, который я нашел / взломал, чтобы создать модальный диалог, который может быть создан вложенным образом (например, контроллер controllerMunicipalitiesLOV, в свою очередь, вызывает showDialog, а другой контроллер вызывает его снова, и т.д).

Хотел бы я знать способ передать "dialogOptions" в качестве дополнительного параметра контроллеру модального диалога - к сожалению, я плохо разбираюсь во внутренностях Angular; любая помощь приветствуется (это сделало бы этот интерфейс намного чище).

Надеюсь, это кому-то поможет.

Мы использовали http://angular-ui.github.io/bootstrap/#/modal для наших модальных окон.

По сути, здесь была указана та же проблема. Большая сетка с данными привязки, кнопка редактирования для отображения модального окна, удаления, сохранения и т. Д.

У вас будет только один модальный div, скрытый на странице, а затем передать модель строк сетки по щелчку (что было проблемой).

e.g.

$scope.editRow = function (model) {
   // do stuff.
};

<span class="icon-edit" ng-click="editRow(model.row)">Edit</span>

Было странно передавать объекты полем через все методы ng-click / controller только для того, чтобы заставить работать модальное окно, но в конце концов это сработало и было СУХОЕ.

Не уверен, что это полезно.

борясь с той же проблемой, я объединил различные части, создав sgDialogService. Это небольшая модульная служба, которая позволяет использовать несколько вложенных диалогов / предупреждений / подтверждения с синтаксисом, аналогичным стандартному диалоговому окну Angular:

var modalInstance = sgDialogService.openModal({
        templateUrl:'sample/dialogContent.html',
        controller:"sampleController",
        data:{fromParent:dialogParam},
         callback: function(result){ $scope.callbackResult=result;}
    });
}

Идея заключалась в том, чтобы

• Используйте единый шаблон для всех диалогов (основанный на начальной загрузке)
• Избегайте любых соединений с другими, кроме Angular и стандартным Javascript
• Создавайте и компилируйте внутренние представления динамически с помощью сервисов $ controller и $ compile.
• Разрешить использование диалогового окна (с или) без создания новых областей
• Наконец, перетащите диалоговое окно (ничего странного, но кажется серьезной проблемой в Интернете.

Как можно скорее выложу версию на github ... нужно только добавить модульные тесты

Изменить 1

Настройте репозиторий на github: sgDialogService