Übergeben von Daten an neue Seite mit Onsenui

Question

Ich versuche, einen API-Endpunkt aufzurufen, sobald ein Benutzer auf eine Schaltfläche klickt, die eine myNavigator.pushPage() -Anforderung enthält. Ich kann jedoch nicht die aus der $ http.get-Anfrage generierten $ -Scope-Daten an die neue Seite übergeben.

Wenn ich mit testen console.log ('test'); innerhalb der .Erfolg der $ http.get Anfrage Ich bekomme erfolgreich die Protokollinformationen in der Konsole, aber alle Daten in gehalten $ scope.var = 'etwas'; wird nicht an die Seite übergeben! Wirklich verwirrt!

$scope.historyDetails = function(id){ 

    var options = { 
     animation: 'slide', 
     onTransitionEnd: function() { 
     $http.get('http://xxx-env.us-east-1.elasticbeanstalk.com/apiget/testresult/testId/'+id).success(function(data) {  

      $scope.testscore = 'something'; // this is not getting passed to page!    

      console.log('bahh'); // But I see this in console 



     });    
     } 
    }; 
    myNavigator.pushPage("activity.html", options);   
} 

Seite:

<ons-page ng-controller="HistoryController"> 
... 

<span style="font-size:1.2em">{{testscore}} </span><span style="font-size:0.5em;color:#555"></span> 

... 
</ons-page> 

Answer 1

Ja, das ist so, weil beide Seiten unterschiedliche Controller hat, in verschiedenen Bereichen zur Folge hat. Man kann nicht auf Variablen von einem Bereich zu einem anderen zugreifen.

Daher kann in diesem Fall eine Lösung den rootScope-Dienst verwenden. Root Scope ist der übergeordnete Bereich für alle Bereiche in Ihrer eckigen Anwendung. Daher können Sie auf Variablen von Root-Bereichen aus jedem anderen Bereich zugreifen, sofern Sie den $ rootScope-Service in diesen Controller injizieren.

mehr über rootScope überprüfen this Link zu wissen.

Viel Glück.

Update 1:

Check diese Artikel

http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS-$rootScope-and-$scope.html

https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Answer 2

Wie Yogesh sagte, der Grund Sie nicht Ihre Werte bekommen, weil, wenn Sie bei $scope.testscore schauen und versuchen, Finden Sie, wo die $scope definiert ist, werden Sie sehen, dass es ein Argument für die Controller-Funktion ist (daher ist es nur für diesen Controller).

Wir können jedoch sehen, dass der Controller an die Seite angefügt ist und Sie eine andere Seite drücken.

Also in diesem Fall haben Sie mehrere Möglichkeiten:

1. Verwenden Sie den $rootScope Dienst als Yogesh vorgeschlagen (in diesem Fall seine Antwort akzeptieren).

2. Erstellen Sie Ihre eigenen Service/Fabrik/etc etwas zu tun, ähnlich wie $rootScope.

   Technisch könnten Sie es vielleicht sinnvoller machen, aber vielleicht sind diese Dinge in einigen winkelförmigen Anleitungen besser beschrieben.

3. Wenn Sie mehrere Komponenten haben, die die gleichen Daten teilen, dann könnten Sie vielleicht Ihren Controller auf einer höheren Stufe definieren - zum Beispiel ons-navigator - auf diese Weise werden alle Seiten eingeschlossen. Das wäre nur dann in Ordnung, wenn Ihre App wirklich klein ist - für große Apps nicht zu empfehlen.

4. Wenn diese Daten nur in activity.html benötigt werden, können Sie es einfach in den Controller dieser Seite bekommen. Zum Beispiel:

   myApp.controller('activityController', function($scope, $http) { 
       $http.get(...).success(function(data) { 
        $scope.data = data; 
       }); 
   } 
   

   Aber ich denke, Sie würden immer noch einige ID bekommen müssen. Wie auch immer, es ist wahrscheinlich besser, wenn du die Anfrage hier machst, jetzt brauchst du nur die ID, nicht die Daten. Sie könnten tatsächlich mit der var Direktive betrügen. Wenn Sie die Aktivitätsseite <ons-page var="myActivityPage"> angeben, können Sie über die Variable myActivityPage darauf zugreifen.

   Und das, was Sie schon lange suchen - wenn Sie

   myNavigator.pushPage("activity.html", options);   
   

   tun eigentlich die Optionen innerhalb des ons-page von activity.html gespeichert wird.

   So können Sie tun

   myNavigator.pushPage("activity.html", {data: {id: 33}, animation: 'slide'}); 
   

   Und in der anderen Steuerung wird Ihre ID myActivityPage.options.data.id sein.

5. Wenn Sie immer noch darauf bestehen, alle Daten statt einer ID zu übergeben - hier ist ein einfaches Beispiel. In den neueren Versionen der 2.0 Beta (ich glaube seit Beta 6 oder 7) geben alle Methoden pushPage, popPage etc ein Versprechen zurück - die auf ons-page auflösen, was die Dinge leichter macht.

   $scope.historyDetails = function(id){ 
       myNavigator.pushPage("activity.html", {animation: 'slide'}).then(function(page) { 
       $http.get('...' + id).success(function(data) { 
        page.options.data = data; 
       }); 
       }); 
   }); 
   

Exkurs: Sie können die Frage schließen möchten, die Sie 5 Tage gebucht vor, wie es ist ein Duplikat dieser eine ist (I must've es zu dieser Zeit nicht eingehalten).