AngularJS (Ionic) : can't send $scope information in other controller

Question

I'm currently learning Ionic and AngularJS. I am currently tweaking a code that works perfectly on their 'tutorial website', but not in my code.

Here's what I'm trying to do : I have a contact list showing some information, and when I click on an item I would like to go to the associated chat.

Here are the states :

$stateProvider
    // contacts
    .state('contacts', {
      url: '/contacts',
      templateUrl: 'templates/contacts.html',
      controller: 'ContactsController'
    })

    // conversation
    .state('conversation', {
      url: '/conversation/:id1/:id2',
      templateUrl: 'templates/conversation.html',
      controller: 'ConversationController'
    })

Here are both controllers :

.controller('ContactsController', function($scope, $state, $stateParams, ChatService) {

$scope.toDiscover = function(){
    $state.go('discover');
};

$scope.toDiscussion = function(user_id1, user_id2){
    $state.go('conversation', {
        id1: user_id1,
        id2: user_id2
    });
};

$scope.chats = ChatService.getChats();
})

.controller('ConversationController', function($scope, $state, $stateParams, ChatService) {

$scope.toContacts = function(){
    $state.go('contacts')
};

$scope.chatId = $stateParams.chatId;
$scope.chat = ChatService.getChat($scope.chatId);
})

And Here's the service called :

.service('ChatService', function(){
  return {
chats: [
  {
    id: "1",
    message: "Chat Message 1"
  },
  {
    id: "2",
    message: "Chat Message 2"
  },
  {
    id: "3",
    message: "Chat Message 3"
  },
  {
    id: "4",
    message: "Chat Message 4"
  },
  {
    id: "5",
    message: "Chat Message 5"
  }
],
getChats: function(){
  return this.chats;
},
getChat: function(chatId) {
  for(i=0; i<this.chats.length; i++){
    if(this.chats[i].id == chatId){
      return this.chats[i];
    }
  }
}
  }
})

And the concerned pages (Contacts):

<ion-view view-title="Contacts" ng-controller="ContactsController">

<ion-content class="content-img" scroll="" class="padding">
    <div class="under-header"></div>

    <a ng-repeat="chat in chats" class="item item-avatar" ng-click="toDiscussion({{chat.id}}, {{chat.id}})">
        <img src="img/launchscreen.png">
        <h2><span class="contact-name"> ({{ chat.id }})</span></h2>
        <p class="preview">Back off, man. I'm a scientist.</p>
    </a>
</ion-content>

Conversation :

<ion-content class="content-img" scroll="" class="padding">
    <div class="under-header"></div>
    <ion-item><b>Chat:</b> {{ chat.id }}</ion-item>
    <ion-item><b>Message:</b> {{ chat.message }}</ion-item>
</ion-content>

<div class="bar bar-footer bar-light cheam-chatbar" keyboard-attach>
    <div class="title"><input type="text" name="chatbox" placeholder="send message to"></div>
</div>

So here's the problem : When in the conversations, I can access te wanted information without any problem. When I click on an item in order to see the associated chat information, there's no information showing.

I've been over the code on their website and in my IDE and don't seem to find the problem.

Could someone explain why this happens ?

Thanks ! (And sorry for the Angular-newbie question)

OClyde · Accepted Answer · 2016-11-12 23:18:16Z

1

Basically you're approach is alright!

Two things: Passing params from one state to another requires a proper state definition in your app.js in the config section. Therefore make sure that you have defined your states in there - if you need detailed information on how to define routes and how routing works in general in Ionic, have a look at this page right here.

So as an example your state would look like this:

$stateProvider.state(
  // other state definitions ..
).state('somestate', {
  url: '/state/:id', // ":id" defines the expected id param
  templateUrl: 'templates/some-state.html',
  controller: 'SomeStateCtrl'
})

Secondly it's not necessary to modifiy the location directly. Inject the $state service and let it handle all the other stuff for you! For the transition, you would then need something like this:

$state.go('somestate', {
  id : 1
}

And you're done. You can now access the id via the $stateParams service as you tried already! Hope this helps you to get your app running!

answered Nov 12, 2016 at 23:18

OClyde

1,0766 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TanguyH Over a year ago

Thanks for the info ! All my states were well defined, and I changed the $location approach to the $state.go() approach. But I still don't seem to be able to retrieve the information in the conversation, is that normal ?

OClyde Over a year ago

Definitely not normal! ;) Could you add your routing definition to your post? Would try to prepare a working example then. If you don't want to wait for me or just would like to do it yourself, you can do it, too - the Ionic Playground is perfect for preparing and sharing quick examples. play.ionic.io Mostly this is the easiest way to detect the problem!

TanguyH Over a year ago

I added the states and the routing so you could see. Somehow I can retrieve info, because my conversation link is : /#/conversation/1/1, but the information below doesn't show. Maybe I'm missing something here ?

OClyde Over a year ago

In your ConversationCtrl you're trying to access $stateParams.chatId, but you've named the IDs "id1" and "id2", so $stateParams.id1 and stateParams.id2 should be defined and accessible!

Collectives™ on Stack Overflow

AngularJS (Ionic) : can't send $scope information in other controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related