Question

我已经看过无数如何进行设置的示例。许多人就在这里。但在我的情况下，没有任何工作。这是一组非常简单的两个视图，一个嵌套在第一个视图之下。第二个ui-view永远不会加载...

这是简单的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

我刚刚更改了模板路径（删除了前导＆＃39; /＆＃39;），并且所有工作都在（但这是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路由器嵌套视图未加载内容

1 个答案: