0

I'm making a simple chat application using AngularJS.

I have made two partial views, one which is a list of chat rooms and another detail view which right now should only display the id and name of the chat room.

Every room in the list has this link: <a href="#/rooms/{{room.id}}">{{room.name}}</a> and when I click on the link I go to index.html#/rooms/0 and can see the hardcoded text in the room details view.

I just cannot figure out how to get info on room with id = 0, which the link points to.

This is my RoomDetailController:

app.controller("RoomController", ["$scope", "$routeParams", 
    function($scope, $routeParams) {
        var roomId = $routeParams.roomId;
}]);

and this is my room-detail.html partial view:

<h2>{{room.name}}</h2>

<p>You are in chat room <b>{{room.name}}</b> with the id: <b>{{room.id}}</b>. Have fun!</p>

Room name and id don't show up in the details view. What should I do with the roomId variable to get the info to show up?

himmip
  • 1,360
  • 2
  • 12
  • 24
  • You need to define the `room` object on the RoomController's `$scope`. Where is the `room` data stored? You probably need to inject it into your controller. – Mark Rajcok Mar 13 '13 at 20:56
  • The room data is in a controller called RoomListController. – himmip Mar 13 '13 at 21:03
  • 1
    You'll probably need to refactor that somewhat and put the shared data into a service. The service can then be injected into both/all controllers that need access to that data. For an example of how to write such a service, see http://stackoverflow.com/questions/15386137/angularjs-controller-inheritance/15390245#15390245 – Mark Rajcok Mar 13 '13 at 21:16

0 Answers0