无法使用Angular ui-router过渡状态

时间:2022-03-04 11:23:34

Im trying to get stateful routing working in an AngularJS app. My config is as follows:

我试图在AngularJS应用程序中使用有状态路由。我的配置如下:

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('index', {          
      url: '^/',               
      templateUrl: 'templates/home.html'
    })
    .state('messsage', {          
      url: '/message/:id',       
      templateUrl: 'templates/message.html'
  });

  // internal redirect to '/' as default
  $urlRouterProvider.otherwise("/");
});

The home state renders, but when I click on a link to the second state I get an error in the console basically saying it cannot transition state:

家庭状态呈现,但是当我点击指向第二个状态的链接时,我在控制台中得到一个错误,基本上说它无法转换状态:

Error: Could not resolve '#/message/0' from state 'index'

The docs / API refs I could find did not help me much.

我能找到的docs / API refs对我帮助不大。

1 个解决方案

#1


2  

The issue here is caused by inappropriate use of the ui-sref directive. There is a plunker showing the issue.

这里的问题是由于ui-sref指令的不当使用造成的。有一个吸烟者显示这个问题。

If, inside of the index state template we do create link like this:

如果在索引状态模板内部我们创建了这样的链接:

<a ui-sref="#/message/0">...

we'll get the Error: Could not resolve '#/message/0' from state 'index'

我们会得到错误:无法从状态'index'解析'#/ message / 0'

The syntax which will work must be like this (both are the same):

将起作用的语法必须是这样的(两者都是相同的):

<a href="#/message/0">...     
<a ui-sref="message({id:0})">...

Check it here

在这里查看

#1


2  

The issue here is caused by inappropriate use of the ui-sref directive. There is a plunker showing the issue.

这里的问题是由于ui-sref指令的不当使用造成的。有一个吸烟者显示这个问题。

If, inside of the index state template we do create link like this:

如果在索引状态模板内部我们创建了这样的链接:

<a ui-sref="#/message/0">...

we'll get the Error: Could not resolve '#/message/0' from state 'index'

我们会得到错误:无法从状态'index'解析'#/ message / 0'

The syntax which will work must be like this (both are the same):

将起作用的语法必须是这样的(两者都是相同的):

<a href="#/message/0">...     
<a ui-sref="message({id:0})">...

Check it here

在这里查看