0

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

console.log('test');を使用してテストすると、$http.getリクエストの .success 内で、コンソールでログ情報を正常に取得できますが、データは$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>
4

2 に答える 2

1

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

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

rootScope の詳細については、このリンクを確認してください。

幸運を。

更新 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/

于 2016-04-04T08:11:05.887 に答える
0

Yogeshが言ったように、値を取得できない理由$scope.testscoreは、定義されている場所を見て見つけようとすると$scope、それがコントローラー関数の引数であることがわかるからです(したがって、それはそのコントローラーのみです)。

ただし、コントローラーがページに接続されており、別のページをプッシュしていることがわかります。

その場合、いくつかのオプションがあります。

  1. Yogeshが提案したようにサービスを使用してください$rootScope（その場合、彼の答えを受け入れてください）.

  2. に似た独自のサービス/ファクトリー/etc を作成します$rootScope。

    (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);

    実際には、オプションはons-pageof内に保存されますactivity.html。

    だからあなたはすることができます

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

    そして、他のコントローラーでは、あなたのIDはmyActivityPage.options.data.id.

  5. ID の代わりにすべてのデータを渡すことを主張する場合は、簡単な例を次に示します。2.0 ベータ版の新しいバージョン (ベータ 6 または 7 以降だと思います) では、すべてのメソッドpushPageなどpopPageは promise を返します。これは に解決され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;
    });
  });
});

補足: 5 日前に投稿した質問は、これと重複しているため、閉じた方がよいかもしれません (その時点で見逃していたに違いありません)。

于 2016-04-04T11:54:57.677 に答える