Angularjs 在$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'
    }
  }
})

但是，我无法访问页面中的“福利”对象/参数。声明的视图。我使用的是基于角度的离子框架

---

谢谢你给我指明了正确的方向

将对象解析为json:

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

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

在状态参数中定义变量：

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

正式文件

编辑：

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

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

有几种方法可以从url将对象传递给控制器：

通过查询参数：

定义选项

url:'/yoururl？a&b&c'

传递变量

yoururl？a=1&b=2&c=3

通过url参数：

定义选项

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？参数'

传递变量

yoururl？参数=eyJhIjoxLCJiIjoyLCJjIjozfQ==

---

关于base64的信息我不确定您的应用程序正在做什么，但是如果您需要在两个控制器之间共享信息，您应该使用某种服务，而不是通过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将id传递给普通的“/URL/：id” .controller（'firstController'，['$state'，函数（$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中留下一堆垃圾，而只是你需要识别状态的东西。你还混淆了存储机制，所以你可以使用对象、本地存储或任何你想要的同步存储机制

---

您还可以通过应用程序在其他任何地方注入和使用服务。

看起来您在您的状态中遗漏了参数“数据”：

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

以下是非常干净的溶液的说明：

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

---

$state.go应该这样更正

var-benefit={“x”：“y”}；
$state.go（'pages.claimed'，{benefit:benefit}）；

将您的url更改为

url:'/claimed？benefit'

，并在controllerThanks中获取

$stateParams.benefit

，通过url传递对象是一个好主意吗？我的url看起来像这样古怪：claimed？benefit=%5Object%20Object%5DIf没有其他传递值的选项（例如，作为查询参数

？x=1&b=2

，或url参数

yoururl/1/2

），您可以对json字符串使用Base64编码。谢谢，这确实传递了数据。您能告诉我，在url中传递这样的对象是否是个好主意吗？我的应用程序不会显示url，因此这不是真正的（书签）如果这是通知控制器的唯一方法，是的，这是常见的解决方案。@Chinthaka Suren Fernando的回答更简单，不需要开发人员手动解析和重建对象，而且显示给客户端的URL更干净，可能有助于op的具体情况，但没有回答他们的问题。这最好作为一个评论。