为什么 ui-sref='tango::new' 向 /tangos/new（复数）发送请求？

Question

HTML

<a ui-sref='tango::new'>Create Tango</a>

tango.routes.js

angular
  .module('tango')
  .config(config)
;

function config($stateProvider) {
  $stateProvider
    .state('tango', {
      url: '/tango/:id',
      templateUrl: '/states/tangos/tango.html',
      controller: 'TangoController as vm'
    })
    .state('tango::new', {
      url: '/tango/new',
      templateUrl: '/states/tangos/tango.html',
      controller: 'TangoController as vm'
    })
  ;
}

这是我点击 link 时发出的请求：

GET http://localhost:3000/tangos/new

这是为什么？我怎样才能阻止它发生？

Answer 1

有a working plunker

这里的要点（尽管状态名称有点不寻常tango::new - 这仍然是绝对有效的）是：状态定义的顺序：

the first (sooner) must be defined more specific, the second (later) the more generic

所以，这应该是正确的顺序：

.state('tango::new', {
  url: '/tango/new',
  templateUrl: 'states/tangos/tango.html',
  controller: 'TangoController as vm'
})

.state('tango', {
  url: '/tango/:id',
  templateUrl: 'states/tangos/tango.html',
  controller: 'TangoController as vm'
})

有了这个订单，这些链接就可以工作了：

//ui-sref
<a ui-sref='tango({id:1})'>tango({id:1})
<a ui-sref='tango({id:22})'>tango({id:22})
<a ui-sref='tango::new'>Create Tango

//href
<a href="#/tango/333">
<a href="#/tango/4444">
<a href="#/tango/new">

检查一下here

为什么 ui-sref='tango::new' 向 /tangos/new（复数）发送请求？

Why is ui-sref='tango::new' sending a request to /tangos/new (plural)?

state

angularjs

angular-ui-router