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です(それが何であるかわかりません)。section1、などのテンプレートを取得しているかどうかを確認するために HTML ソースを調べたところ、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' }
});
等々。