TanguyH TanguyH - 24 days ago 11
AngularJS Question

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

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)

Answer

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!