Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Angular rotes, problema na passagem de objeto por parametro na rota

Olá, estou com o seguinte problema na utilização do angular routes:

html da pagina

 <ion-item class="item item-thumbnail-left" ng-repeat="produto in grupo.produtos" href="#/tab/home/add-item/{{produto}}"">
            <img src="{{produto.url}}">
            <h2>{{produto.valor | currency }}</h2>
            <h3>{{produto.formaPagamento}}</h3>
            <p>{{produto.descricao}}</p>
            <p>{{produto.complemento}}</p>
          </ion-item>

arquivo de rota

// Ionic ecomerce App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'ecomerce' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'ecomerce.services' is found in services.js
// 'ecomerce.controllers' is found in controllers.js
angular.module('ecomerce', ['ionic', 'ecomerce.controllers',
 'ecomerce.services','ecomerce.home-controller','ecomerce.home-add-item-controller'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js

  $stateProvider

  // setup an abstract state for the tabs directive
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tab-home.html',
        controller: 'HomeController'
      }
    }
  })

  .state('tab.home-add-item',{
    url : '/home/add-item/:produto',
    views:{
      'tab-home': {
        templateUrl: 'templates/home-add-item.html',
        controller: 'HomeAddItemController' 
      } 
    }
  })

  .state('tab.chats', {
    url: '/chats',
    views: {
      'tab-chats': {
        templateUrl: 'templates/tab-chats.html',
        controller: 'ChatsCtrl'
      }
    }
  })
  .state('tab.chat-detail', {
    url: '/chats/:chatId',
    views: {
      'tab-chats': {
        templateUrl: 'templates/chat-detail.html',
        controller: 'ChatDetailCtrl'
      }
    }
  })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/home');
  $ionicConfigProvider.tabs.position('bottom');
});

controller da pagina destino

app.controller('HomeAddItemController', function($scope,$stateParams,$ionicModal) {

    console.log($stateParams.produto);
}

quando chamo o href no html, não ocorre erro algum e não chama a outra pagina. quando passo {{produto.id}} ao invés de {{produto}} a rotina funciona normalmente (já tentei tambem utilizar a diretiva ui-sref passando o estado mas o resultado foi o mesmo). alguém pode me ajudar?? existe alguma configuração diferenciada para quando utilizamos objetos ao invés de parametros primitivos que deva ser feita??

desde já agradeço. Att Lucas Reis

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
3 respostas
solução!

Oi.

Vc terá que fazer a navegação usando $state. Um exemplo seria assim:

$state.go('minhaRota', {meuObjeto: {nome: 'lazaro', idade: 20}})

E na declaração da roda assim:

$stateProvider.state('minhaRota', {
                url: '/minhaRota/{meuObjeto:json}',
                params: {meuObjeto: null},
})

Muito obrigado lazaro, funcionou perfeitamente!

Q bom, Lucas.

Bons estudos.