web-dev-qa-db-ja.com

$ state.goのパラメーターとしてオブジェクトを渡す

別の状態/画面に移動し、この次の画面に単純なjsonオブジェクトを渡したいです。

私は次のものを持っています：

var benefit = { "x": "y"};
$state.go('pages.claimed', { 'benefit': benefit });

私の状態は次のようになります。

.state('pages.claimed', {
  url: '/claimed',
  views: {
    'page': {
      templateUrl: 'templates/pages/claimed.html'
    }
  }
})

ただし、pages.claimedビューの「利点」オブジェクト/パラメーターにアクセスできません。角度に基づいたionicフレームワークを使用しています。

私を正しい方向に向けてくれてありがとう！

angularjsionic-frameworkangular-routing
20
Jorre

jsonへのオブジェクトの解析：

var benefit = angular.toJson({ "x": "y"});

状態パラメーターの変数の定義：

.state('pages.claimed', {
   url: '/claimed?params',
   views: {
     'page': {
       templateUrl: 'templates/pages/claimed.html'
     }
   }
})

を介したコントローラーから変数へのアクセス$stateParams：

var benefit = angular.fromJson($stateParams.benefit);

ここ 完全なドキュメント

編集：

URLからコントローラーにオブジェクトを渡す方法はいくつかあります。

クエリパラメータを使用：

オプションの定義url: '/yoururl?a&b&c'、

変数を渡すyoururl?a=1&b=2&c=3

Via url params：

オプションの定義url: '/yoururl/:a/:b/:c',

変数を渡すyoururl/1/2/3

より複雑な状況では、オブジェクトをjson文字列に解析し、base64でエンコードできます

オブジェクト：{ a:1, b:2, c:3 } JSON文字列：{"a":1,"b":2,"c":3} Base64エンコード文字列：eyJhIjoxLCJiIjoyLCJjIjozfQ==

オプションの定義url: '/yoururl?params'

変数を渡すyoururl?params=eyJhIjoxLCJiIjoyLCJjIjozfQ==

その他 base64に関する情報

15
Umidbek Karimov

$ state.goはこのように修正する必要があります

var benefit = { "x": "y"};
$state.go('pages.claimed', { benefit: benefit });

.stateは次のようになります

.state('pages.claimed', {
  url: '/claimed',
  params: { benefit: null },
  views: {
    'page': {
      templateUrl: 'templates/pages/claimed.html'
    }
  }
})

次のコントローラーで、渡されたオブジェクトを次のようにキャッチします

(function () {
    'use strict';

    angular.module('YourAppName').controller('ControllerName', ['$stateParams', ControllerName]);

    function ControllerName($stateParams) {
                var vm = this;
        vm.variableToBind = $stateParams.benefit;
    };
})();
9
Chinthaka Suren Fernando

非常にきれいなソリューション：

app.js：

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: { obj: null }
})

controllers.js

function UserCtrl($stateParams) {
    console.log($stateParams);
}

次に、他のコントローラーから：

$state.go('users', {obj:yourObj});
3
askilondz

アプリケーションが何をしているのかわかりませんが、2つのコントローラー間で情報を共有する必要がある場合は、URL経由で大量のデータを渡さずに、何らかのサービスを使用する必要があります。 URLは、データ転送の手段ではなく、状態を識別するためにパラメーターを渡すことです。

おそらく、何らかの工場が必要になるでしょう。アンダースコアを想定した、ちょっとした特典登録サービスです。

.factory('benefitsService', ['_', function(_){
    function BenefitsService(){
        this.benefits = [{
           id: 'benefit1',
           x: 100,
           y: 200
        },{
           id: 'benefit2',
           x: 200, 
           y: 300
        }];
    }

    // use this to register new benefits from a controller, other factory, wherever.
    BenefitsService.prototype.addBenefit = function(benefit){
        this.benefits.Push(benefits);
    }

    BenefitsService.prototype.findById = function(id){
        return _.findWhere(this.benefits, {id: id});
    }

    return new BenefitsService();
}]);


.run(['benefitsService', function(benefitsService){
     // we're going to register another benefit here to show usage....
     benefitsService.addBenefit({
        id: 'addedBenefit', 
        x: 2000, 
        y: 4000
     });
}])

次に、URLを介して通常の「/ url /：id」にidを渡すだけです。controller（ 'firstController'、['$ state'、function（$ state）{$ state.go（ 'stateId'、{id： 'addedBenefit'}）;}）;

//そして、注入されたサービスを使用してデータを見つけます。

.controller('secondController', ['$state', 'benefitService', function($state, benefitService){
    var benefit = benefitService.findById($state.params.id); 
    // and you're home!
}]);

この方法では、状態を特定するために必要なものだけが、URLの中に大量に残されます。また、ストレージメカニズムを難読化したため、オブジェクト、ローカルストレージ、または任意の同期ストレージメカニズムを使用できます。

また、アプリケーションを介して他の場所に注入して使用できるサービスもあります。

3
sammysounder

あなたの状態でパラメータ「データ」を見逃したように見えます：

.state('pages.claimed', {
    url: '/claimed',
    views: {
      'page': {
        templateUrl: 'templates/pages/claimed.html'
      }
    },
    data: {
      benefit: {}
    }
  })

ドキュメント からの説明です

1
punov