AngularJS子视图未显示答案

【问题标题】：AngularJS Child view not showingAngularJS子视图未显示
【发布时间】：2018-09-03 18:22:49
【问题描述】：

我正在尝试渲染子视图。但是它没有显示，这是下面的代码示例。我看到的大多数示例都将整个状态模板放在一个模板中；但是我在不同的模板中有几个视图，它们组成了每个状态模板。

.state({
          name: 'search',
          url: '/x',
          abstract: true,
          views: {
            'searchBar': {
              templateUrl: "template/template.html",
              controller: "searchBar"
            } 
          }
        })
        .state({
          name: 'search.final',
          url: '^/details', 
          params: {
            Data: "hello World"
          },
          views: {
            'dashb': {
              templateUrl: 'template/dashb.html'
            },
           'sidebar': {
              templateUrl: 'template/sidebar.html'
            },
          }

然后我的 index.html 如下

<div>
    <div class="row">
      <div class="col-lg-3">
        <div ui-view="searchBar"></div>
        <br>
        <div ui-view="sidebar"></div> 
        <br>
      </div>
      <div class="col-lg-9" ui-view="dashb"></div>
    </div>
  </div>

我在 searchBartemplate 中有 <ui-view></ui-view> 表示要插入的子视图，即sideBar和dashb

在控制器中我有这个：

$state.go("search.final" , {Data:"Byee"})

但是我没有渲染子视图.. 任何帮助表示赞赏。谢谢

【问题讨论】：

使用templateUrl: 'template/sidebar' 而不是template: 'template/sidebar'
感谢我在帖子中犯了错误。我实际上在实际代码中将它作为“templateUrl”..所以这不是问题。不过谢谢。

标签： javascript html angularjs angular-ui-router childviews

【解决方案1】：

我想通了。我们需要在子视图的视图名称末尾附加@。 :)

.state({
          name: 'search',
          url: '/x',
          abstract: true,
          views: {
            'searchBar': {
              templateUrl: "template/template.html",
              controller: "searchBar"
            } 
          }
        })
        .state({
          name: 'search.final',
          url: '^/details', 
          params: {
            Data: "hello World"
          },
          views: {
            'dashb@': {
              templateUrl: 'template/dashb.html'
            },
           'sidebar@': {
              templateUrl: 'template/sidebar.html'
            },
          }

【讨论】：