Question

我无法让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>

感谢任何帮助。谢谢！

Answer 1

以下是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>

所以我们可以看到，即使这个州也需要自己的锚，目标：

// 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 Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

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

1 个答案:

View Names - Relative vs. Absolute Names