名前の付いた複数のビューが表示されない

私はui-routerを使用した非常に単純な角型アプリケーションを最初から構築しようとしています。
すべてのページは、（上から下に、縦方向に）同じ外観を持つことになりますし、次の4つのセクションがあります（すべてのページに共通）名前の付いた複数のビューが表示されない

HEADER
（すべてのページに共通）HORIZONTAL MENU （すべてのページに共通）
CONTENT（これは変更されるコンテンツのみです）
FOOTER

私index.htmlはを持っています<body>タグ内の

私はまた、すべてのページの構造を含む単純なHTMLファイル（portal.html）持っている：私はすべてのページに共通のセクションを設定し、親の状態を、作成していました

<div ui-view="header"></div> 
<div ui-view="menu"></div> 
<div ui-view="content"></div> 
<div ui-view="footer"></div>

を：

：、私はすべてのページへの変数の内容を設定する - （ページ各メニューオプションの1）

$stateProvider 
    .state('portal', { 
    url: '/portal', 
    templateUrl: 'app/main/portal.html', 
    views: { 
     header: { 
     templateUrl: 'app/main/section/header.html' 
     }, 
     menu: { 
     templateUrl: 'app/main/section/menu.html' 
     }, 
     footer: { 
     templateUrl: 'app/main/section/footer.html' 
     } 
    } 
    });

そして、いくつかの子状態

$stateProvider 
    .state('portal.home', { 
    url: '/home', 
    views: { 
     '[email protected]': { 
     controller: 'HomeCtrl as homeVM', 
     templateUrl: 'app/portal/home.html' 
     } 
    }, 
    resolve: { /* whatever */ } 
    }) 

    // ... and so on ... 

    .state('portal.contactUs', { 
    url: '/contact-us', 
    views: { 
     '[email protected]': { 
     controller: 'ContactUsCtrl as contactUsVM', 
     templateUrl: 'app/portal/contactUs.html' 
     } 
    }, 
    resolve: { /* whatever */ } 
    });

これは画面上に何も表示されません...私はここに何かを逃していますか？

出典

2016-11-11 charliebrownie

：親状態は次のように設定する必要があります'$ stateProvider.state（）' 私は、すべての子供状態でそれらの共通の意見を 'N '回設定することを避けるために、その方法を望んでいました... – charliebrownie

最終的に解決策が見つかりました。実際に私を助けたのはthis StackOverflow postで、それは私のものと非常に似ていて、特にそこに表示されているplunker exampleです。

間違ったのは、にの状態設定オブジェクトが渡されたことです。私は、少しの研究を異なるものをしようとして最近何のトラブルを引き起こしている可能性がありますすることに渡される状態設定オブジェクトの `views`財産であることを考え出してきた

$stateProvider .state('portal', { url: '/portal', views: { '@': { templateUrl: 'app/main/portal.html' }, '[email protected]': { templateUrl: 'app/main/public/header.html' }, '[email protected]': { templateUrl: 'app/main/public/menu.html' }, '[email protected]': { templateUrl: 'app/main/public/footer.html' } } });

出典

2016-11-11 12:14:33 charliebrownie

名前の付いた複数のビューが表示されない

答えて

関連する問題