2016-12-11 5 views
0

UI Routers 1.0.0で角1.5.9の定型文を設定しようとしています。 ui-view内に親状態のコンポーネントを表示することはできますが、親の中に状態を入れ子にすると、コンポーネントが私のUIビューに注入されません。コンポーネントは私のUIビューに挿入されていません

これは、これはそれがで私は、UIビューに何かを注入することができないんだ。この点にある主成分

<div class="main-container"> 
    <banner></banner> 
    <div ui-view='ui-view></div> 
</div> 

である私のindex.html

<body ng-app="app"> 
<ui-view></ui-view> 
</body> 

です。

これは私が私が間違ってやっているかわからないんだけど、私のjavascriptファイル

$stateProvider 
    .state('app', { 
     url: '/', 
     component: 'main' 
    }) 
    .state('app.login', { 
     url: '/login', 
     views: { 
     'ui-view': { 
      templateUrl: './app/login/login.html' 
     } 
     } 
    }); 

で、正しい道へ/方向の任意の助けいただければ幸いです。

私はすべてが期待どおりに動作する親状態としてログインを参照するとき

  1. 役に立つかもしれませんEDIT

    追加情報。

  2. ログインコンポーネントは、私のメインモジュールに含まれている別のモジュールの一部です。

+0

'index'ページの' ui-view'コンテナに 'login.html'をロードする場合は、'

+0

1.0.0-beta.1は、私が使っているバージョンです。私は名前付きビューを取り除きましたが、要素を検査すると空のUIビューを持つ空白のページが表示されています – Sai

答えて

0

各親コンポーネントで一人の子供の状態を入れ子にするために、あなたが主成分のテンプレートで使用ui-viewディレクティブは、「UI-ビュー」の値を加算していたとして名前のビューを使用する必要はありません。名前の付いたビューは、複数のUIビューに対処する必要がある場合にのみ必要です。次に名前で参照する必要があります。

名前付きビューを正しくターゲティングしていないため、サンプルではコンテンツが表示されません。名前付きビューがルートファイルではないテンプレートに定義されている場合、それらの名前付きビューに対処する方法にいくつかのルールがあります。その場合、あなたのケースでは "ui-view @ app"を意味する "ui-view-name @ state"構文でui-viewを参照することにより、より具体的にする必要があります。

あなたの単純なケースでは、ui-viewの名前を省略して、状態設定のviewsセクションをプレーンテンプレート(またはコンポーネント参照)に置き換えてください。ネスティングビューの詳細については

.state('app.login', { 
    url: '/login', 
    templateUrl: './app/login/login.html' 
}); 

ui-router docsに大きなサンプルアプリケーションを見てください。

+0

ちょっと、名前付きビューを削除するようにコードを変更しました。/loginに行くと、空白のページしか表示されません。要素を検査するとき、UIビューは空です。私が提供する必要がある他の有用なものがあれば私に知らせてください。 – Sai

+0

コンソールログでエラーを確認してください。いずれかがあります?また、ログインが角型コンポーネントであるか、テンプレートとコントローラだけを指定して参照するかによっても異なります。あなたの最後の答えでは、ログインはtemplateUrl経由で直接使用することができないコンポーネントだと思われます。これは、コンポーネントではないレガシースタイルのためのものです。だから、ui-viewの名前を省略し、コンポーネントとしてログインを参照することは、そのトリックでしたか? –

0

これは本当に奇妙なので、私はなぜそれがそのように機能したかについては説明していません。私がしたことは、javacriptファイルを以下のものに変更することでした。

私の親の代わりに '/'を '/ login'に変更しました。私は誰かがこの行動の背後にある理由を知っているかどうか知りたいと思うだろう。

0
$stateProvider 
    .state('app', { 
     url: '/', 
     templateUrl: path/to/main_component.html 
    }) 
    .state('app.login', { 
     url: '/login', 
     views: { 
     'ui-view': { 
      templateUrl: './app/login/login.html' 
     } 
     } 
    }); 

あなたはui-viewがその親の状態テンプレートにチェックされますapp.loginビュー(状態)です。テンプレートがない場合は、レンダリングする場所がわかりません。

'ui-view':{}は、その親ビューを対象としています。 '[email protected]':{}は、index.htmlのルートコンポーネントをターゲットにしています

関連する問題