UI-Router不从$ templateCache加载模板？

Question

我不想为标签导航创建嵌套状态。而且我还需要将所有标签放在同一个文件中。

所以我决定使用$templateCache。

这是我ui-router的配置：

$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');
  }
});

这是我的contents/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网址时，contents/books.html模板已加载并显示，但bookBestTab.html和bookNewTab.html均未显示。< / p>

我做错了什么？