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

I'm not able to get UI Router to work properly on my page. It works fine for the navigation links, but not for the specific section I'm working on. I was able to recreate the issue in a plnkr (http://plnkr.co/edit/unQKWfkoSGdqaoncEPgG) and even compared it to an "official" plnkr that works fine and I don't see any differences. When I click a link, the URL changes, but the new page doesn't display.

我无法让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){}
});

Here's where the link is clicked:

这是点击链接的位置：

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

Any help is appreciated. Thanks!

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

1 个解决方案

#1

Here is the updated plunker, with this update

这是更新的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>

So what we can see, is that even this state needs its own anchor, target:

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

// 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){}
});

Check it here

在这里查看

There is also another option. We can target the same ui-view as parent does. It will in fact replace parent. The definition then would be like this plunker with this state:

还有另一种选择。我们可以像父母一样定位相同的ui-view。它实际上将取代父母。然后定义就像这个状态的plunker：

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

What we use here is the named view:

我们在这里使用的是命名视图：

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

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