AngularJS UI 路由器嵌套视图未加载内容

Question

我查看了无数个关于如何进行设置的示例。许多人就在这里。但在我的情况下没有任何效果。这是一组非常简单的两个视图，一个嵌套在第一个视图之下。第二个 ui- 视图从不加载...

这是简单的 index.html...

<body ng-app="d6Games">
   <div ui-view="home"></div>
</body>

这是简单的子视图，它在 home.html 模板中...

<div class="d6body bilbo">
     <div ui-view="content"></div>
</div>

这是简单的状态...

.state('home', {
    url: '/home',
    views: { 
        'home': {
            templateUrl: '/views/home.html'
        }
    }
})

.state('home.intro', {
    url: '/intro',
    views: { 
        'content': {
            templateUrl: '/views/game-intro.html'
        }
    }
})

第一个 /views/home.html 模板加载正常，正如预期的那样，但是子 /views/game-intro.html 从未加载。它只是 html 和文本，它与 home.html.

在同一个文件夹中

我错过了什么？

Answer 1

有a working plunker

我刚刚更改了模板路径（删除了前导的“/”），一切正常（但是这是 plunker 所必需的，不确定您的环境和路径设置）:

$stateProvider
  .state('home', {
    url: '/home',
    views: {
      'home': {
        templateUrl: 'views/home.html'
      }
    }
  })

  .state('home.intro', {
    url: '/intro',
    views: {
      'content': {
        templateUrl: 'views/game-intro.html'
      }
    }
  })
}

检查在行动here

AngularJS UI 路由器嵌套视图未加载内容

AngularJS UI Router nested view not loading content

angularjs

angular-ui-router