Javascript 用户界面路由器不'；是否从$templateCache加载模板？

我不想为选项卡导航创建嵌套状态。我还需要将所有选项卡都放在同一个文件中

所以我决定使用

$templateCache

来实现它

这是我的

ui路由器的配置：

$stateProvider
.state('books', {
  abstract: true,
  url: '/books',
  controller: 'BooksCtrl',
  templateUrl: 'contents/books.html'
})
.state('books.best', {
  url: '/best',
  templateProvider: function($templateCache) {
    console.log('getting bookBestTab.html'); // is logged
    return $templateCache.get('bookBestTab.html');
  }
})
.state('books.new', {
  url: '/new',
  templateProvider: function($templateCache) {
    console.log('getting bookNewTab.html'); // is logged
    return $templateCache.get('bookNewTab.html');
  }
});

这是我的
目录/books.html
文件：

<div>
    <!--Some common stuff-->
</div>
<div ui-view></div>

<script type="text/ng-template" id="bookBestTab.html">
    <!-- best books table -->
</script>

<script type="text/ng-template" id="bookNewTab.html">
    <!-- new books table -->
</script>



当我转到
books/best
或
books/new
URL时，会加载并显示
contents/books.html
模板，但从未显示
bookBestTab.html
或
booknetab.html

我做错了什么？
可能是因为您尝试加载的两个模板都在books.html模板中，它们没有及时插入$templateCache以使请求成功。也许可以将它们加载到你的index.html文件中？@ewahner可能会，但你知道有没有办法将模板保存在
books.html
中？我不知道你为什么要这样做。通过将它们放在应用程序启动时加载的文件中，或者将它们放在不同的文件位置，然后让$templateCache从该位置加载它们，对我来说更有意义。保持你的观点模块化。不要在您的视图中填充视图，这正是UI Router和UI view标记的用途。可能是因为您尝试加载的两个模板都在books.html模板中，所以它们没有及时插入$templateCache以使请求成功。也许可以将它们加载到你的index.html文件中？@ewahner可能会，但你知道有没有办法将模板保存在
books.html
中？我不知道你为什么要这样做。通过将它们放在应用程序启动时加载的文件中，或者将它们放在不同的文件位置，然后让$templateCache从该位置加载它们，对我来说更有意义。保持你的观点模块化。不要在视图中填充视图，这正是UI路由器的用途和UI视图标记。