javascript - UI 路由器更改 URL 但不更改页面

我无法让 UI 路由器在我的页面上正常工作。它适用于导航链接，但不适用于我正在处理的特定部分。我能够在 plnkr ( http://plnkr.co/edit/unQKWfkoSGdqaoncEPgG ) 中重现该问题，甚至将其与运行良好的“官方” plnkr 进行比较，我看不出有任何差异。当我单击一个链接时，URL 会发生变化，但不会显示新页面。

$stateProvider
.state('home', {
  abstract: true,
  url: '/home',
  templateUrl: 'home.html',
  controller: function($scope){}
})
.state('home.resource', {
  url: '/resource',
  templateUrl: 'resource.list.html',
  controller: function($scope){}
})
.state('home.resource.edit', {
  url: '/edit/:id',
  templateUrl: 'resource.edit.html',
  controller: function($scope){}
});

这是点击链接的位置:

<a ui-sref='.edit({id: 1})'>Go to edit</a>

任何帮助表示赞赏。谢谢!

最佳答案

这是 updated plunker ，有这个更新

<h4>resource index list</h4>
<ul>
  <li><a ui-sref='.edit({id: 1})'>Go to edit</a>
  <!--
     this line below was added
     it is an anchor/target for unnamed view
     defined in the home.resource.edit state
   -->
  <div ui-view=""></div>
</ul>

所以我们可以看到，即使这个状态也需要自己的 anchor ，目标:

// this is the parent state
.state('home.resource', {
  url: '/resource',
  templateUrl: 'resource.list.html',
  controller: function($scope){}
})

// child state needs its own target <div ui-view="">
.state('home.resource.edit', {
  url: '/edit/:id',
  templateUrl: 'resource.edit.html', // this template will be injected into parent
  controller: function($scope){}
});

检查它 here

还有另一种选择。我们可以针对与父级相同的 ui-view。它实际上将替换父级。定义将是这样的 plunker 具有这种状态:

.state('home.resource.edit', {
  url: '/edit/:id',
  views : {
  '@home' : {
    templateUrl: 'resource.edit.html',
    controller: function($scope){}
    }
  }
});

我们在这里使用的是命名 View :

View Names - Relative vs. Absolute Names

关于javascript - UI 路由器更改 URL 但不更改页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26345611/