在 Angular ui 路由器中传递对象 - stateParam答案

【问题标题】：Passing an object in Angular ui router - stateParam在 Angular ui 路由器中传递对象 - stateParam
【发布时间】：2015-10-05 19:35:51
【问题描述】：

我想知道是否可以在 Angular ui 路由器的 stateParams 中传递 JSON 对象。到目前为止，当我试图传递一个对象时，我记录它并得到“[object Object]”。

我做了一些研究，发现了这个话题：AngularJS: Pass an object into a state using ui-router 但是，没有一个答案对我有用。

到目前为止，我已经尝试过：

<a ui-sref="profile({user: data})"></a>

地点：

   .state('profile', {
        url: "/profile/:user",
         templateUrl: "profile/profile.html",
        controller: "ProfileCtrl",
        params : { user: null }
     })

有什么想法吗？

EIDT：和变量数据应该是这样的：

{
"_id": "5612d4f138cf125420331d1e",
"index": 0,
"guid": "2fa8a98f-902e-4dfd-a8ac-24e3fdc52d8c",
"isActive": false,
"balance": "$3,957.95",
"picture": "xxxxx",
"age": 23,
"eyeColor": "brown",
"name": "xxxxxxx",
"gender": "female",
"company": "xxxx",
"email": "xxxx@xxxx.xxx",
"phone": "xxxxx",
"address": "xxxxx"}

我从浏览器获得的链接如下“http://localhost:8888/#/profile/%5Bobject%20Object%5D”

到目前为止，这是对我有用的技巧：

使用
ng-click="goToProfile(data)"

而不是ui-sref，功能是

$scope.goToProfile= function(data){
            var object = data;
            $state.go('profile', {user: object})  ;
        };

【问题讨论】：

您可以发布您尝试过的内容吗？
你是如何记录的？
user.data 的值是多少？它是一个对象吗？
:user 已在您的$state.params.user 中可用。因此，在您的 ProfileCtrl 中，只需通过$state.params.user 访问它，当然要确保您已将“$state”注入您的控制器。
@uksz 它确实有效，因为 JSON.stringify 不是递归的，因此仅将第一级对象转换为字符串。尝试在 Chrome 控制台中记录此内容，您将看到整个对象。否则，请尝试在当前浏览器中执行 .controller('ProfileCtrl', function($stateParams) { console.log(JSON.stringify($stateParams.user)); }); 以查看用户对象。

标签： angularjs angular-ui-router

【解决方案1】：

我相信您正确地传递了对象。问题是您正在使用 console.log 在浏览器中记录一个对象，该对象仅显示打印 [object Object] 的对象引用（已知 IE 的版本可以做到这一点）。

您可以使用 console.dir 代替 console.log (explained here) 或将您的对象包装在 JSON.stringify 中以显示对象作为字符串。您还可以使用其他浏览器的控制台（想到 chrome）或在 html 模板中输出对象，如下所示：

.controller('ProfileCtrl', function($stateParams) { 
    var vm = this;
    vm.user = $stateParams.user;
 })

在你的模板中：

<div ng-controller="ProfileCtrl as vm">
    <pre>{{vm.userObj|json}}</pre>
</div>

【讨论】：

试试看，一会就知道了
没有解决问题。但是，我发现通过使用 ng-click="goToProfile(data)" 和 $scope.goToProfile= function(data){ var object = data; $state.go('profile', {user: object}) ; };，我通过数据没有任何问题