AngularJS - controller öffnen in einem dialog (Vorlage dynamisch geladen)

Ich bin Herumspielen mit AngularJS. Ich bin mit einem controller und einer templateUrl Dinge haben automagisch 🙂
Derzeit hat das layout nur <div ng-view></div> Richtlinie, in die alle Sachen geladen werden.

Möchte ich zum öffnen des modalen (Bootstrap oder jQuery UI, ist egal) und laden es (innerhalb eines modalen Körper) der controller angegeben link gegeben.

Nur wie jeder link "öffnet" (lädt die Vorlage & hat die DOM-compilation & linking) innerhalb der main - ng-view möchte ich einige links zu öffnen in der modal.

Habe ich ausgecheckt, was AngularStrap und Angular-UI-Bootstrap zu bieten hat, und keiner von Ihnen hat das, was ich Suche.

AngularStrap erhalten neue partial-template, aber nicht ausgeführt wird der neue controller.

Gibt es eine Lösung /snippet führt, dass der zweite controller im Modal/Dialog?

InformationsquelleAutor migajek | 2013-06-02

  1. 12

    Hier ist ein plnkr , das veranschaulicht die Verwendung der Winkel - + ui-bootstrap zu starten, ein dialog mit dem eigenen template und controller.

    Es klingt wie Sie ein bisschen verwirrt über die Beziehung zwischen einem controller und den DOM. Die controller nicht Leben in dem DOM, in der Tat, wir versuchen, Sie zu halten die 2 Dinge deutlich. Vielmehr ist der DOM mit einem verbunden ist $Umfang gesteuert wird, die durch einen... (Sie Ahnen es...) - controller.

    So, in dem Beispiel, der controller wird geladen, wenn die dialog-Elemente werden Hinzugefügt, um den DOM, aber der controller ist nicht "geöffnet" im dialog" in irgendeiner sinnvollen Weise. Der dialog könnte genauso gut verwenden die gleichen controller, der die Haupt-app verwendet, durch den Austausch "DialogCtl" mit "DemoCtl" auf der Linie 17 von der demo. Was ich versuche zu sagen ist, dass der controller, und der dialog unabhängig sind. Dialoge sind nicht der Ausführung-Controller, sondern Sie verbrauchen $scope gelungen.

    UPDATE: ich habe gerade herausgefunden, das Beispiel ist ein bisschen buggy, wenn Sie schließen Sie das Dialogfeld und versuchen Sie dann, erneut zu öffnen, der modal angezeigt wird, aber nicht den dialog. Ich versuche jetzt die aus zu Sortieren, ich bin mir nicht wirklich sicher, was Los ist...

    UPDATE 2: ich glaube, die Unfähigkeit, um neu zu laden der dialog hat zu tun mit template-caching. In diese plnkr Sie sehen, dass ich Sie eine "cache buster" auf den querystring, und der dialog neu geladen, aber der modal-hintergrund nicht. Die Beispiel ui-bootstrap Seite kann geladen werden & neu geladen, ohne Frage, aber Sie sind mit einer hart-codiert Vorlage (anstelle einer Vorlagen-url). Ich war nicht in der Lage zu bekommen, dass die Arbeit in plnkr. Oh, die Freuden der Arbeit auf der bleeding edge :-/

    UPDATE 3: ich kann nicht herausfinden, was Los ist, aber stellte diese Frage um Hilfe Öffnen Sie den gleichen dialog mehrmals mit $dialog

    danke!!! Ich versuche zu verstehen, die demo jetzt 🙂 BTW, warum ist es ng-include="index.html" im inneren index.html? Vielleicht wurde ich falsch verstanden, ich weiß controller sollten getrennt von der Vorlage, was ich mit "kontrolliert öffnen-dialog" ist, dass der dialog Inhalt ist nicht nur eine separate (Teil -) Vorlage, sondern es verfügt auch über separate Umfang und ausgeführt wird, das unter einem separaten controller-Kontext (d.h. EditCtrl), so dass ich nicht zu verschmutzen ListCtrl Logik mit dem "save" - Methode, die sollte gehören zu den EditCtrl, als müsste ich, wenn ich verwendet, ng-include-Direktive.
    das war der falsche code, habe ich es gelöscht. es war unnötig und falsch, bin ich mir noch nicht sicher, warum der dialog nicht' relaunch obwohl...
    es scheint, dass es keinen zuverlässigen Weg, um es Arbeit auf den IE. Klick auf 'öffnen-dialog' zeigt den dialog zweimal, aber wir bekommen folgende Fehlermeldung : Fehler: 10 $digest() Iterationen erreicht. Abbruch! Jetzt, wenn Sie deaktivieren Browser-temp-Daten und starten Sie IE, es funktioniert wieder (für 2 Klicks), habe ich überprüft Ihre 'UPDATE 3', das funktioniert, aber nicht was das problem mit <a>
    Ich habe eine aktualisierte plunker mit href="" statt href="#" und es kann wieder geöffnet werden, jetzt. (Got-Lösung von angularjs - Öffnen Sie den gleichen dialog mehrmals mit $dialog). Wir sollten uns alle hüten Sie sich jedoch vor, dass $dialog ist Weg vom ui-bootstrap. Hier ist Dan Wahlin der workaround erstellen $dialog aus $modal. Prinzip ist immer noch gut, obwohl.
    Ich habe aktualisiert auf Winkel 1.4.8 und ui-boostrap 1.2.4 plnkr.co/Bearbeiten/I354huESaeHKNNCuV7hk?p=Album Vorhören

    InformationsquelleAutor Jason

  2. 0

    Es scheint, dass die $dialog Richtlinie ist noch nicht in der aktuellen version von ui-bootstrap. http://angular-ui.github.io/bootstrap (0.11)

    Alternative Richtlinie könnte modal:
    http://angular-ui.github.io/bootstrap/#/modal

    Hier ist ein Plunker, um zu sehen, wie es funktioniert.
    http://plnkr.co/edit/?p=preview

    Diese plnkr url nicht vorhanden ist hier ein Beispiel mit der neuen ui-boostrap plnkr.co/Bearbeiten/I354huESaeHKNNCuV7hk?p=Album Vorhören

    InformationsquelleAutor The Bndr

  3. 0
    $mdDialog.show({
                locals: {alert:"message"},
                controller: DialogController,
                templateUrl: 'apps/sidebar/views/dialog1.tmpl.html',
                parent: angular.element(document.body),
                clickOutsideToClose:true
            })

    InformationsquelleAutor Jijo Paulose

Schreibe einen Kommentar