AngularJS verschachtelte modale Dialoge

Da gab es keine Möglichkeit, dies zu lösen, mit der "unter-Rekonstruktion" AngularUI die dialog-service, die ich verwendet, jQueryUI dialog (die hat keine Probleme mit modals laichen modals laichen modals...), und erstellt eine Art "mini-framework" von meiner eigenen. Ich Basis eine Menge von dem, was ich Tat, auf die Quellen der AngularUI dialog, und es scheint gut zu funktionieren.

Dies ist der Angular service, den ich codiert (Typoskript-code, so dass es einige geben specs - aber Reine Javascript sonst). Da es spawnt, modale Dialoge, ich rief den service "Plato" 🙂

...

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...");
                    }
                });

            }
        };
    }]);
}

...und verwenden Sie es wie diese:

Erste, der aufrufende code, der zeigen will, der dialog:

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

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

mit der HTML-teilweise Vorlage mit eckigen Controllern und-Richtlinien wie gewohnt:

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

und die modalen dialog-controller mit Handler wie diese:

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

Ich im Grunde pass showDialog:

• des Anrufers Bereich, wo ich speichern erfolgreich "dialogOptions"
• die dialog-Titel
• das Dialogfeld HTML-Vorlage
• die "dialogOptions", wo die Dinge sind vergangen, und aus dem dialog in die .Ergebnis
• die "dialogOptions" enthält auch einen Rückruf

Design ist ein kompletter hack, um es milde auszudrücken, aber es funktioniert: ich benutze den Anrufer Umfang zu speichern dialogOptions, und im inneren dialog-controller verwende ich $scope.$Eltern.dialogOptions, Lesen eingehende Zeug, von dem Anrufer, und speichern Sie alle Ergebnisse, die die callback-Lesen ("dialogOptions" als eine Brücke zwischen den beiden scopes).

Mindestens 2013/Juli, es ist der einzige Winkel-y Weg, die ich gefunden/gehackt zum erstellen eines modalen Dialogfeld, das können hervorgebracht werden, die in einer verschachtelten Art und Weise (z.B. die controllerMunicipalitiesLOV controller Aufruf von showDialog in der Reihe, und ein anderer controller ruft es wieder, etc).

Ich wünschte, ich wüsste einen Weg, um pass "dialogOptions" als zusätzlichen parameter auf die modalen Dialogfeld controller - leider bin ich nicht versiert in den Winkel-Innenseiten ; alle Hilfe-das meiste willkommen, (es machen würde, diese Schnittstelle viel sauberer).

Hoffe, das jemand hilft.

kämpfen für das gleiche problem habe ich geputtet togethere verschiedene Teile, Gebäude sgDialogService. Es ist ein kleines Modul service, der es erlaubt mehrere verschachtelte Dialoge/Warnungen/bestätigen Sie mit einer syntax ähnlich wie die standard-Winkel-dialog:

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

War die Idee

• Nutzung einer einzigen Vorlage für alle Dialoge (basierend auf bootstrap-one)
• Vermeiden Sie jede Verbindung mit anderen als Winkel - & standard-Javascript -
• Bauen und kompilieren Sie die internen Ansichten dynamisch mit Unterstützung der $controller und $kompilieren Dienstleistungen
• Erlaubt die Verwendung des dialogs (mit oder) ohne die Schaffung neuer Bereiche
• Schließlich ziehen Sie den dialog (nichts seltsam, aber es scheint ein großes Thema im internet.

So bald wie möglich werde ich eine version auf github...müssen nur fügen Sie die unit-tests

Bearbeiten 1

Setup-repository auf github: sgDialogService