11

我正在使用嵌套视图开发我的 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 文件。如果我点击一个链接，应用程序会使用$state.go('myState'). 此时，URL 已更改，但页面中未加载子视图。

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

你知道我错过了什么吗？

对不起英语不好

4

1 回答 1

6

有一个工作的plunker

index.html很可能包含以下目标：

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

因此，如果父母和孩子都针对这些，我们需要使用绝对命名：

.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>'},
   }
})

让我们观察文档：

查看名称 - 相对名称与绝对名称

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

例如，前面的例子也可以写成：

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

因此，我们的孩子需要使用 1) 视图目标名称 2) 分隔符 @ 和 3) 状态名称（在我们的字符串中为空代表根）：'area1@'

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

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

在这里检查

于 2015-06-04T08:31:49.987 回答