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
はレンダリングされていますが、メイン レイアウトはレンダリングされていません。
section
inの値を確認しました$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' }
});
等々。