UI 路由器参数 URL 无法正常工作，只是重定向到 /

Question

我正在尝试让 UI 路由器有一个详细的消息视图，这里是代码：

  .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];
    }
  })

这是消息数组：

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

然而，当我转到 /#/messages/Deputy 时，我被重定向到 / （有一个重定向说要转到 / 如果找不到页面)

Answer 1

当您运行此代码时，您应该会在控制台看到类似这样的错误：

无法读取未定义的属性 'Deputy'

我认为真正的消息定义应该是：

$scope.message = messsages[$stateParams.id];

Answer 2

很高兴看到状态层次结构的完整图片。因为这个：

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

可能与父状态相关，（我预计）已经定义了 /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}',

因为如果不进行调整（使用双倍 /messages 定义），我们将需要这样的 url

/#/messages/messages/Deputy

UI 路由器参数 URL 无法正常工作，只是重定向到 /

UI Router parameter URL not working just redirecting to /

javascript

angularjs

angular-ui

angular-ui-router