パスオブジェクト

Question

私は私のUI-ルータの状態にパラメータの1つとしてオブジェクトを渡ししようとしている：

JS：

.state('graph', { 
       name: 'Graph', 
       url: "/graph?{friends}&{start}&{end}", 
       templateUrl: 'templates/graphs.html', 
       controller: 'GraphController' 
      }) 

HTML：

<a ui-sref="graph({friends: test.friends, start: test.start_date, end: test.end_date})"> 
    My Graphs 
</a> 

TEST：

{ friends: 
     { 
     'friend1': [MORE_DATA], 
     'friend2': [MORE_DATA] 
     }, 
    start_date: "Jun-17", 
    end_date: "Jun-19" 
} 

しかし、コントローラの$stateParamsにアクセスしようとすると、文字列"[object Object]"が出力されます。 test.friendsオブジェクトを通過させるにはどうすればよいですか？

Answer 1

クエリ文字列にオブジェクトを渡すことはできません。したがって、状態のURLを構築した方法によって、オブジェクトがと表示されている文字列に変換されています。

あなたの代わりに行うべきことは、以下のようにあなたの状態のためにparamsを作成することです。これにより、オブジェクトを渡してコントローラ内で$stateParams経由でアクセスできるようになります。

angular.module('app', ['ui.router']) 
 
    .config(function($stateProvider, $urlRouterProvider) { 
 
    $urlRouterProvider.otherwise("/"); 
 
    $stateProvider 
 
     .state('main', { 
 
     url: '/', 
 
     template: '<div><a ui-sref="graph({friends: main.friends, start: main.start_date, end: main.end_date})">Go to graph</a></div>', 
 
     controller: 'MainController as main' 
 
     }) 
 
     .state('graph', { 
 
     url: '/graph', 
 
     template: '<div>Graph</div><div>{{graph.friends}}</div><div>Start: {{graph.startDate}}, End: {{graph.endDate}}', 
 
     controller: 'GraphController as graph', 
 
     params: { 
 
      friends: null, 
 
      start: null, 
 
      end: null 
 
     } 
 
     }); 
 
    }) 
 
    .controller('MainController', function() { 
 
    var _this = this; 
 
    _this.friends = 
 
     { 
 
     'friend1': 'friend 1', 
 
     'friend2': 'friend 2' 
 
     }; 
 
    _this.start_date = "Jun-17"; 
 
    _this.end_date = "Jun-19"; 
 
    }) 
 
    .controller('GraphController', function($stateParams) { 
 
    var _this = this; 
 
    _this.friends = $stateParams.friends; 
 
    _this.startDate = $stateParams.start; 
 
    _this.endDate = $stateParams.end; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ui-view></div> 
 
</div>