ui-router: modal öffnen und pass übergeordneten scope-Parameter

Ich bin mit diesem FAQ-Eintrag zum öffnen eines modalen Dialoges in einen kindlichen Zustand von einem bestimmten Zustand: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

Mein code ist unten. Wenn ich öffnen Sie ein modales Dialogfeld, die ich brauche, um Zugang zu den Eigenschaften des übergeordneten staatlichen Rahmen. Ist das möglich?

plnkr: http://plnkr.co/edit/knY87n

         .state('edit', {
             url: '/{id:[0-9a-f]+}',
             views: {
                 '@': {
                     templateUrl: 'views/edit.html',
                     controller: 'editContr'
                 }
             }
         })
         .state('edit.item', {
             url: "/item/new",
             onEnter: function($stateParams, $state, $modal) {
                 $modal.open({
                     controller: 'itemEditContr',
                     templateUrl: 'views/edit-item.html',
                 }).result.then(function (item) {
                     //
                     //here I need to insert item into the items
                     //seen by my parent state. how?
                     //
                     $state.go('^');
                 }, function () {
                     $state.go('^');
                 });
             }
         });


function editContr($scope) {
    $scope.items = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
}

function itemEditContr($scope, $modalInstance) {
     $scope.submit = function () {
         $modalInstance.close($scope.item);
     };
     $scope.cancel = function () {
         $modalInstance.dismiss('cancel');
     };
     $scope.item = {name: 'test'};
}
InformationsquelleAutor akonsu | 2014-03-21
  1. 4

    Sind Sie planen, zu aktualisieren, params die Eltern setzen? Sie sollten in der Lage sein, um die übergeordneten Staat mit

    $state.$current.parent

    Z.B. der name des übergeordneten Staates, wird $Status.$aktuelle.Eltern.name

    EDIT: Aktualisierung seit der OP wollte Zugriff auf den Umfang und nicht den übergeordneten Staat.

    Können Sie emittieren ein Ereignis, von dem Kind, und erfassen Sie es in der Eltern.

    Ungetestete code:
    Im Elternteil:

    $scope.$on('ADD_ITEM', function(evt, msg) {
     $scope.items.add(msg);
}

    In der Kind-Zustand:

    $scope.$emit('ADD_ITEM', item);
    • Ich brauche, um auf den Geltungsbereich, nicht auf übergeordneten staatlichen...
    • Bitte siehe meine bearbeitete Antwort.
    • danke. der Anwendungsbereich des übergeordneten Staates ist ein Sprössling der Geltungsbereich des Kindes Zustand, aber ich denke, ich kann meine callback auf $rootScope huh? 🙂
    • Hmm, nicht sicher, wie seine Geschwister und nicht ein Kind. Wäre es möglich, post ein Turnschuh?
    • das ist, weil ich bin auf die then Funktion, die aufgerufen wird durch das Versprechen zurück durch die $modal.open.
    • bitte sehen plnkr hier: plnkr.co/Bearbeiten/knY87n es zeigt das problem. Zeile 39 Drucke scope, und es ist nicht ein Kind von den übergeordneten staatlichen Bereich. Ich habe Kommentare über das, was ich brauche. vielen Dank für Eure Hilfe.
    • In Ihrem Fall gibt es keine controller für das Kind Zustand, $modal erstellen einer neuen untergeordneten Umfang, es sei denn, ein Bereich der an es übergeben wird. Dies ist der Anwendungsbereich, für die der Eltern ist ein $$prevSibling. Wenn Sie hatte ein controller definiert in Ihrem kindlichen Zustand der Bereiche hierarchisch sein. Wie auch immer, ich bekam, was Sie wollte, mit einem service. Erstellen Sie einen service, der den Wert von "title" und festgelegt, dass sowohl die controller, als auch als teh onEnter-block. Ich habe eine Geige die ich posten kann, dass ändert sich der Wert der Titel (auf dem Bildschirm angezeigt), wenn Sie geladen ist, und einen anderen Titel, wenn seine geschlossen (oder entlassen)
    • ja, habe ich versucht herauszufinden, wie Sie passieren einen Rahmen zu $modal aber ich sehe nicht, wie ich das tun kann. danke. Ich weiß, über eine service-Injektion, ich war versuchen zu finden, einen direkten Weg, es zu tun. Dein Vorschlag mit dem Bereich Veranstaltungen arbeitet (ich muss nur einen Hörer auf $rootScope).
    • Sie haben keine Notwendigkeit zu verwenden $rootScope, und es wäre schlecht, die Praxis in diesem Fall zu tun.
    • was war Ihre Lösung? Ich bin mit diesem modalStateProvider und es ist unmöglich, den Bereich auf $modal.open @see stackoverflow.com/a/24726331/595152
    • Ich verstehe, warum er braucht, $rootScope. $modal ist ein Kind Rahmen einer vorgesehenen Umfang, wenn kein Raum zur Verfügung gestellt, die es verwendet den $rootScope.
    • Ich war senden von Ereignissen an Stammbereich und erwähnte ich im Kommentar oben.

    InformationsquelleAutor rajasaur
  2. 1

    lange Geschichte kurz, ja es ist. Lesen Sie die angularjs-Entwickler Leitfaden für Bereiche, ist eigentlich einer der Ihren, hilfreich und sehr gut dokumentierten Stücke: http://docs.angularjs.org/guide/scope

    Abgesehen davon, dass scope in angular ist nichts anderes als ein Rahmen mit jedem javascript-Objekt.

    Haben Sie ein oder zwei Dinge, die man nicht tut, richtig. Für, vorbei item in Ihrem onEnter Funktion wird nicht helfen, es sei denn, Sie greifen etwas aus der url als identifier, oder resloving einige Daten, die Sie injizieren in die Staaten controller. Sie versuchen zu tun, die letztere, aber Sie sind nicht nichts auflösen, so dass Sie immer undefined auf Element.

    Einen trick, die Sie verwenden können, um eine truthy-Wert in der Ihrer Eltern, und darauf zugreifen.

     //in parent ctrl
 $scope.newItem = function(itemname){
     return {name:itemname}
 }

 $scope.save = function(item){
    $scope.items.push(item);
}

    Dann, wenn Sie öffnen Sie Ihren modalen Aufruf $scope.getItem() im controller statt der Injektion Element in der Steuerung direkt

    function itemEditContr($scope, $modalInstance) {
     $scope.submit = function () {
         $modalInstance.close();
     };
     $scope.cancel = function () {
         $modalInstance.dismiss('cancel');
     };
     $scope.item = $scope.newItem('test') //this will look for newItem funciton in the local scope, fail to find it, and walk up the heirarchy until it has found newItem() in the parent

    //now a save function, also defined on the parent scope
    $scope.save($scope.item);


}

    Zugriff auf den übergeordneten scope ist nichts besonderes, so stellen Sie sicher, dass Sie einen Wert ein, und nicht überschreiben. so können Sie auf $scope.items aus der untergeordneten Steuerung durch Zuweisung an eine variable, oder Sie können schieben Sie es neue Werte, aber nie set, oder erstellen Sie eine neue lokale Objekte Objekt auf dem untergeordneten Bereich statt.

    • danke. das problem ist, dass die $scope ich, dass ich in itemEditContr ist ein Geschwister, ein Kind, das von der $scope gesehen in editContr... ich gues ich verwenden könnte $scope.$$prevSibling aber es sieht zerbrechlich aus.
    • dein code ist definitiv ein child Umfang und nicht Geschwister Umfang. mit item.edit garantiert, dass der Umfang, innerhalb itemEditContr ist ein Kind editContr. dazu gibts, dass bedeutet, dass die angular-ui-router ist auf der Suche nach einem ui-view Richtlinie in Ihrer Vorlage für Ihre edit Zustand, um zu sehen. Dies kann, warum Sie denken, dass Sie Geschwister sind, aber Sie sind nicht. die Definition der Ansicht in der Art und Weise haben Sie in der edit Zustand ist nicht anders als nur mit Vorlage innerhalb der main-Status-config statt der Schachtelung in ein view-Objekt.
    • das ist, weil ich bin auf die then Funktion, die aufgerufen wird durch das Versprechen zurück durch die $modal.open. dies ist nicht in den controller...
    • ich habe nie gesagt, es war. beim definieren eines neuen Staates auf der stateProvider, und verwenden Sie die . und das bisschen, bevor es ist der name einer bereits bestehenden Zustand, dann definieren Sie ein Kind Zustand. und mit @ innerhalb der Ansichten config nur Ziele jede ui-view-innen Bearbeiten die Bereiche übergeordnete Sicht, das ist Standardverhalten. Sie müssen definiert ein Kind Zustand.
    • bitte sehen plnkr hier: plnkr.co/Bearbeiten/knY87n es zeigt das problem. Zeile 39 Drucke scope, und es ist nicht ein Kind von den übergeordneten staatlichen Bereich. Ich habe Kommentare über das, was ich brauche. vielen Dank für Eure Hilfe.
    • warum würden Sie erwarten, dass die Konsole.log zeigen übergeordneten Bereich? und warum würden Sie nicht verwenden, $log statt? Tut mir Leid, aber ich bin fertig zu helfen, bis Sie zeigen, dass Sie bereit sind, zu hören, was wir versuchen, Ihnen zu sagen.
    • das ist in Ordnung. Ich brauche keine Hilfe mehr. Ich habe nie gesagt, dass ich es erwartet zeigen die übergeordneten Bereich. Sie sind nicht zu hören, was ich sage.

    InformationsquelleAutor Brian Vanderbusch
  3. 0

    Kämpfte ich mit dieser auch gefunden und eine alternative Lösung. Anstelle der Verwendung der onEnter Funktion, die Sie verwenden können, eine Steuerung mit einer sehr einfachen Ansicht aus, der eine Funktion aufruft zum öffnen des modalen. Habe ich eine 

    config(['$stateProvider', function($stateProvider) {

            //Now set up the states
            $stateProvider

                    .state('exmple.modal', {
                        url: "/example/modal/",
                        controller: "ExampleController",
                        template: '<div ng-init="openModal()"></div>'
                    });
        }]);

    In der Beispiel-controller ein setzen der openModal() Funktion zum öffnen des modalen, wo Sie haben einen Geltungsbereich.

    InformationsquelleAutor Merijn Schering
Schreibe einen Kommentar