どの状態に応じて表示が異なる

ログインページ、登録アカウントページ、およびその他のページがある角度ページがあります。サイドバー、ツールバーなどがないため、ログイン/登録は他のページとは異なります。完全に異なるレイアウト。インデックスページとインデックスコントローラがあり、現在ロードするビューを決定します。このような何か：どの状態に応じて表示が異なる

<body ng-app="myApp" ng-controller="IndexController as vm"> 
    <div ui-view ng-if="$state.current.name === 'home'"></div> 
    <div ng-if="$state.current.name !== 'home'"> 
     <!--TOOLBAR--> 
     <!--SIDEBAR--> 
     <div ui-view></div> 
    </div> 
</body>

現在の状態がhomeであれば基本的に、それは（sidenavなどのツールバーなしで）最初のビューをロードする必要があります。現在の状態がhomeに設定されていない場合は、ツールバー、サイドバーなどが表示されます。私はこれがうまくいくと思っていましたが、もっと良い方法がありますか？私は私のすべての州を私の内に持っていますapp.js。

さまざまなビューを分離するより良い方法があるかどうかを教えてください。なぜ私がこれをやっているのは、すべてのインクルード（モデル、ビュー、コントローラ）と他のスクリプトを1ページ（上記を含むindex.html）に保存し、それに応じてビューを変更したいからです。ありがとう。

出典

2016-09-11 MortenMoulder

controller asの構文を使用して、私は$stateが定義されていないと仮定しています。コントローラースコープ（$ scopeではなく）（this.$state = $state）に追加し、vm.$state.current...を使用して呼び出す必要があります。

あなたはこれをやっておらず、ui-routerネスト状態を使用すると、この問題を正確に解決できます。

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views

これを行うにはいくつかの方法があります。 1つは状態をフォークして、ホームが親ビューを継承しないようにすることです。

$stateProvider.state('home', {}) 
.state('app', {}) // has parent views like menu 
.state('app.foo', {}) // inherits views from app

または使用という名前のビューのようなものだから私は単にだろう

<body> 
    <div ui-view="menu"></div> 
    <div ui-view="content"></div> 
</body> 

$stateProvider.state('app' { views: { menu: { ... } } }) 
.state('app.home', { views: { '[email protected]': { /* inject empty tpl */ }, '[email protected]' : { ... } }) 
.state('app.foo', { views: { '[email protected]' : { ... } } });

出典

2016-09-11 15:41:19

：ホームサインインしているとサインアップ。 'home.signin'と' home.signup'を状態として扱います。それでは、私が以前にしたことを単にやってみましょう。ここで状態が 'home'に設定されているかどうか確認します。 – MortenMoulder

テンプレートで状態を確認できないものを実行します。テンプレートは、可能な限り状態から切り離されている必要があります。州のプロバイダでそのロジックを行います。 –

ビュー/テンプレートを作成するにはどうしたらいいですか？異なる構造（あなたが見ることができるように）。 – MortenMoulder

どの状態に応じて表示が異なる

答えて

関連する問題