Question

我想导航到另一个状态/屏幕并将一个简单的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 视图中的“优惠”对象/参数。我正在使用基于角度的离子框架。

感谢您指出我正确的方向！

Answer 1

将对象解析为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);

Here完整文档

修改

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

通过查询参数：

定义选项url: '/yoururl?a&b&c'，

传递变量yoururl?a=1&b=2&c=3

通过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的
More信息

Answer 2

$ state.go应该像这样纠正

＆＃13;

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

＆＃13;

.state应该是这样的

＆＃13;

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

＆＃13;

在下一个控制器中按如下方式捕获传递的对象

＆＃13;

(function () {
    'use strict';

    angular.module('YourAppName').controller('ControllerName', ['$stateParams', ControllerName]);

    function ControllerName($stateParams) {
		var vm = this;
        vm.variableToBind = $stateParams.benefit;
    };
})();

＆＃13;

Answer 3

我不确定你的应用程序在做什么，但是如果你需要在两个控制器之间共享信息，你应该使用某种服务，而不是通过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
     });
}])

然后你只需将ID通过URL传递给正常的＆＃34; / url /：id＆＃34; .controller（＆＃39; firstController＆＃39;，[＆＃39; $ state＆＃39;，function（$ state）{ $ state.go（＆＃39; stateId＆＃39;，{ id：＆＃39; addedBenefit＆＃39; }）; }）;

//并使用您注入的服务来查找您的数据。

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

通过这种方式，您不会在网址内部出现大量内容，而只会识别您需要识别状态的内容。您还对存储机制进行了模糊处理，因此您可以使用对象，本地存储或任何您喜欢的同步存储机制。

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

Answer 4

非常干净的解决方案：

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

Answer 5

看起来您错过了州内的参数“数据”：

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

以下是documentation

的说明

将对象作为$ state.go中的参数传递

5 个答案: