1

I am trying to get UI router to have a detailed message view, here is the code:

  .state('app.messages.detail', {
        url: 'messages/{id}',
        templateUrl: 'templates/views/message.html',
        controller: function($scope, sharedProperties, $stateParams) {
          console.log($stateParams);
          messages = sharedProperties.getMessages();
          $scope.message = messsages.name[$stateParams.id];
    }
  })

Here is the messages array:

var messages = { 
  "Deputy": 
  {
    "name": "Deputy", 
    "message": ["Test", "Whey", "I See you!"]
  },
  "SOCO": 
  {
    "name": "SOCO",
    "message": ["Second Test", "Does this actually work?"]
  }
};

However when I go to /#/messages/Deputy I get redirected to / (There's a redirect to say to go to / if page not found)

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335

2 Answers2

1

Would be nice to see the complete picture of the state hierarchy. Because this:

However when I go to /#/messages/Deputy I get redirected to / (There's a redirect to say to go to / if page not found)

could be related to parent state, which (I expect) already defines /messages

// parent
.state('app.messages', {
    url: '/messages',

// child should not repeat the parent's *url* part, it is already there
.state('app.messages.detail', {
    //url: 'messages/{id}',
    url: '/{id}',

Because without that adjustment (using doubled /messages definition) we would need url like this

/#/messages/messages/Deputy
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
0

when you run this code you should see an error like that at the console:

Cannot read property 'Deputy' of undefined

I think true message definition is should be:

$scope.message = messsages[$stateParams.id];
oguzhan00
  • 499
  • 8
  • 16