Пропустить объект как параметр в $ state.go

17

Я хочу перейти к другому состоянию / экрану и передать простой 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 . Я использую ионный каркас, основанный на угловом.

Спасибо, что указали мне в правильном направлении!

    
задан Jorre 04.08.2014 в 11:49
источник
  • измените свой url на url: '/ заявленный? выгоду' и получите $ stateParams.benefit в контроллере –  Umidbek Karimov 04.08.2014 в 12:09
  • Спасибо, хорошая идея передать объект по URL-адресу? Мой url выглядит причудливым следующим образом: утверждаемый? Benef =% 5Bobject% 20Object% 5D –  Jorre 04.08.2014 в 12:17
  • Если нет другой опции для передачи значений (например, в качестве параметра запроса: x = 1 и b = 2 или параметра url yoururl / 1/2), вы можете использовать кодировку Base64 для вашей json-строки developer.mozilla.org/en- США / документы / Web / JavaScript / ... –  Umidbek Karimov 04.08.2014 в 12:23

5 ответов

15

Разделить объект на 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);

здесь полный документ

Edit:

Существует несколько способов передать объект в контроллер из URL:

Через параметры запроса:

определить параметры url: '/yoururl?a&b&c' ,

pass variables yoururl?a=1&b=2&c=3

Через URL-параметры:

определить параметры url: '/yoururl/:a/:b/:c',

pass variables yoururl/1/2/3

Для более сложных ситуаций вы можете проанализировать свой объект на json string и закодировать его с помощью base64

Объект: { a:1, b:2, c:3 } JSON String: {"a":1,"b":2,"c":3} Base64 Кодированная строка: eyJhIjoxLCJiIjoyLCJjIjozfQ==

определить параметры url: '/yoururl?params'

pass variables yoururl?params=eyJhIjoxLCJiIjoyLCJjIjozfQ==

Подробнее о base64

    
ответ дан Umidbek Karimov 04.08.2014 в 12:16
  • Спасибо, что действительно передает данные. Можете ли вы сказать мне, если это хорошая идея, чтобы передать такие объекты в URL-адресе? Мое приложение не будет отображать URL-адрес, так что это не проблема (закладка) –  Jorre 04.08.2014 в 12:20
  • Если это единственный способ уведомить ваш контроллер, да, это общее решение. –  Umidbek Karimov 04.08.2014 в 13:10
7

Ваш $ stage.go должен быть исправлен следующим образом

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

Ваше государство должно быть таким:

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

Надеюсь, это поможет Благодарю вас.

    
ответ дан Chinthaka Suren Fernando 18.01.2017 в 08:12
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
     });
}])

Затем вы просто передаете идентификатор через URL-адрес на что-то нормальное "/ url /: 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-адреса, только то, что вам нужно для определения состояния. Вы также запутали механизм хранения, поэтому можете использовать объект, локальное хранилище или любой синхронный механизм хранения, который вам нужен.

У вас также есть услуга, которую вы можете вводить и использовать в другом месте через ваше приложение.     

ответ дан sammysounder 30.12.2014 в 22:22
  • Может быть, полезно для конкретной ситуации, но не отвечает на их вопрос. Это лучше будет служить комментарием. –  Josh Noe 18.05.2015 в 23:16
3

Очень чистое решение:

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});
    
ответ дан askilondz 01.06.2016 в 16:42
1

Похоже, вы пропустили «данные» параметра в своем состоянии:

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

Вот описание документации     

ответ дан punov 15.10.2015 в 17:13