我在我的 angular.js 应用程序中使用 ng-boilerplate 和 ui-router。我有一个 3 部分布局、一个顶栏、一个侧边栏和一个主布局。我使用 ng-switch 在主布局中显示不同的视图。这是我的 index.html 的样子
<div class="slide-animate" ng-include="HeaderTemplate"></div>
<div class="slide-animate" ng-include="SidebarTemplate"></div>
<div ng-switch on="section">
<div ui-view="secion1" class="secion1" ng-switch-when="secion1"></div>
<div ui-view="secion2" class="secion2" ng-switch-when="secion2"></div>
<div ui-view="secion3" class="secion3" ng-switch-when="secion3"></div>
</div>
我的HeaderTemplate和SidebarTemplate正在渲染，但主要布局没有被渲染。
我检查了sectionin的值$scope。这section1很好，当我在开发人员工具中检查时，这就是它的DOM样子
<div ng-switch="" on="section">
<!-- ngSwitchWhen: section1 --><div ui-view="section1" class="section1 ng-scope" ng-switch-when="section1"><!-- ui-view-anchor --></div>
<!-- ngSwitchWhen: section2 -->
<!-- ngSwitchWhen: section3 -->
</div>
所以这里选择了正确的部分，但ui-view只显示了一个评论ui-view-anchor。（我不知道那是什么。）。我查看了我的 html 源代码，看看我是否正在获取我section1的 、section2等的模板，我发现我正在获取它们。我在 中看到了templates-app.js，我正在为我的部分获取 html。知道为什么它在获取 html 时不呈现 html 吗？我的$stateProvider配置看起来像这样
$stateProvider.state('section1', {
url: '/section1',
views: {
"section1": {
controller: 'Section1Ctrl',
templateUrl: 'section1/section1.tpl.html'
}
},
data: { pageTitle: 'Section 1' }
});
等等。