OnSenuiを使用して新しいページにデータを渡す

Question

ユーザーがmyNavigator.pushPage（）リクエストを保持しているボタンをクリックするとAPIエンドポイントを呼び出そうとしています。しかし、$ http.get要求から生成された$ scopeデータを新しいページに渡すことはできません。

console.log（ 'test'）を使用してテストすると、$ http.getリクエスト内のログ情報は正常に取得されましたが、データは$ scope.var = 'something'に保持されています。はページに渡されません！本当に混乱している！

$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);   
} 

ページ：

<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

両方のページが異なるスコープで、その結果、異なるコントローラを持っているので、はい、それはそうです。あるスコープから別のスコープに変数にアクセスすることはできません。

この場合、rootScopeサービスを使用することができます。 ルートスコープは、角度アプリケーションのすべてのスコープの親スコープです。 したがって、そのコントローラに$ rootScopeサービスを注入している場合は、他のスコープからルートスコープの変数にアクセスできます。

詳細については、rootscopeチェックthisリンクを知っています。

幸運。

アップデート1：

チェックこれらの記事

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

ヨーゲッシュはあなたが$scope.testscoreを見て、しようとした場合ので、あなたは自分の価値観を取得していない理由は言ったようにここでは$scopeが定義されていますが、それはコントローラ関数の引数であることがわかります（したがって、コントローラのためだけです）。

しかし、コントローラーがページにアタッチされており、別のページを押していることがわかります。あなたはいくつかのオプションを持っている場合はそう

：ヨーゲッシュは（その場合には彼の答えを受け入れる）提案されているよう

1. は$rootScopeサービスを使用してください。

2. $rootScopeと似たようなことを行う独自のサービス/ファクトリ/ etcを作成します。

   (function(){ 
       var historyData = {}; 
       myApp.factory('historyData', function() { 
        return historyData; 
       }); 
   })(); 
   

   技術的には、おそらくそれをより有意義なものでしたが、多分これらの事は良く、いくつかの角度のガイドで説明されています。

3. 複数のコンポーネントが同じデータを共有している場合は、上位のレベル（たとえば、ons-navigator）にコントローラを定義するだけで、すべてのページを含めることができます。それはあなたのアプリが本当に小さい場合にのみ大丈夫だろう - それは大きなアプリにはお勧めできません。

4. このデータがactivity.htmlにのみ必要な場合は、そのページのコントローラで取得できます。例：

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

   しかし、私はまだいくつかのIDを取得する必要があると思います。とにかく、あなたがここでリクエストを行うと、おそらくもっと良いでしょう、今はIDだけでなくデータが必要です。 varディレクティブで実際にそれを不正行為させることができます。あなたが活動ページ<ons-page var="myActivityPage">を与えたら、あなたはmyActivityPage変数を通してそれにアクセスすることができます。

   そして、あなたが探してきたもの - あなたは

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

   を行う際に、実際のオプションはactivity.htmlのons-page内に保存されます。

   だから、

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

   を行うことができますし、他のコントローラでは、あなたのIDがmyActivityPage.options.data.idになります。

5. IDの代わりにすべてのデータを引き渡すことを依頼している場合は、ここに簡単な例があります。 2.0ベータ版の新しいバージョン（私はベータ6または7以降だと思います）のすべてのメソッドpushPage、popPageなどは約束を返します。これはons-pageに解決され、より簡単になります。

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

サイドノート：それはこの1つの複製が（私はその時にそれを逃したんだろう）だとしてあなたは、あなたが5日前に投稿質問を閉じたいことがあります。