0

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>

私のHeaderTemplateSidebarTemplateはレンダリングされていますが、メイン レイアウトはレンダリングされていません。

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

等々。

4

1 に答える 1