Angular UI-路由器：URL 已更改但未加载视图

Question

我正在开发带有嵌套视图的 UI-Router 应用程序。我这样定义了一些状态：

 $stateProvider

    .state('parent', {
      url: "/parent",
       views: {
         'area1': {templateUrl : 'parentView.html'},
         'area2' : ... // some other areas + template
       }
    })

    .state('parent.child1', {
      url: "/child1",
       views: {
          'area1' : {templateUrl : 'child1View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

    .state('parent.child2', {
      url: "/child2",
       views: {
          'area1' : {templateUrl : 'child2View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

在使用该应用程序时，我将主视图划分为一些区域。在第一个区域，我使用了一个特定的 html 文件。如果我单击 link，该应用会使用 $state.go('myState') 进入子状态。那时，URL 已更改但子视图未加载到页面中。

我在网站上搜索了答案，我从另一个似乎在这里遇到同样问题的人那里找到了这个问题：Angular Router - Url changes but view does not load

你知道我错过了什么吗？

抱歉英语不好

Answer 1

有a working plunker

很可能 index.html 包含这些目标：

<body>
    <div ui-view="area1"></div>
    <div ui-view="area2"></div>
    ...

所以，如果 parent 和 child 都针对这些，我们需要使用 绝对命名:

.state('parent.child1', {
  url: "/child1",
   views: {
      'area1@' : {template : '<h2>child 1 area 1 </h2>'},
      'area2@' : {template : '<h2>child 1 area 2</h2>'},
   }
})

.state('parent.child2', {
  url: "/child2",
   views: {
      'area1@' : {template : '<h2>child 2 area 1 </h2>'},
      'area2@' : {template : '<h2>child 2 area 2</h2>'},
   }
})

让我们观察文档：

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.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

因此，我们的 child 需要使用 1) 查看目标名称 2) 分隔符 @ 和 3) 状态名称 （在我们的字符串中为空表示根） : 'area1@'

这些类似于 $state.go() 的链接现在可以使用：

  <a ui-sref="parent">
  <a ui-sref="parent.child1">
  <a ui-sref="parent.child2">

检查一下here

Angular UI-路由器：URL 已更改但未加载视图

Angular UI-Router : URL changed but view isn't loaded

javascript

angularjs

nested-views

angular-ui-router