2

私の Angular アプリには index.html が<div ng-view></div>あり、本体の中に a があります。ロード時に、$routeProvider を介して提供される単一の部分ビューからログイン画面がユーザーに表示され、ログインに成功すると、ルートがログイン済みの部分ビューに変更されます。

$routeProvider.
    when('/login', {templateUrl: 'partials/login.html',   controller: 'LoginCtrl'}).
    when('/loggedin', {templateUrl: 'partials/loggedin_part.html', controller: 'UserCtrl'}).
    otherwise({redirectTo: '/login'});

ただし、ログインしたら、infobar、nav、main の 3 つの個別のパーシャルを同時に表示する必要があります (main は、現在表示されている nav アイテムと交換可能です)。現在、loggedin_part.html に次のものがあります。

<ng-include src="'partials/infobar_part.html'"></ng-include>
<ng-include src="'partials/nav_part.html'"></ng-include>
<ng-include src="'partials/main_part.html'"></ng-include>

私の質問は、 $routeProvider の異なるサブビューを介して提供するより効率的な方法はありますか? 私の現在の方法では、各ナビゲーション項目/ルートに対して上記のloggedin_part.htmlなどの「ホルダー」パーシャルを作成します。つまり(仮説):

login_admin_part.html

<ng-include src="'partials/infobar_part.html'"></ng-include>
<ng-include src="'partials/nav_part.html'"></ng-include>
<ng-include src="'partials/admin_part.html'"></ng-include>

ルート

$routeProvider.
    when('/login', {templateUrl: 'partials/login.html',   controller: 'LoginCtrl'}).
    when('/loggedin', {templateUrl: 'partials/loggedin_part.html', controller: 'UserCtrl'}).
    when('/admin', {templateUrl: 'partials/loggedin_admin_part.html', controller: 'AdminCtrl'}).
    otherwise({redirectTo: '/login'});

各ナビゲーション グループについても同様です。「ホルダー」パーシャルをスキップして、ルート条件ごとに複数のパーシャルを提供することは可能ですか? 次のようなものです（注、構文が間違っていることは承知しています。これは私が説明しようとしている考えです）：

$routeProvider.
    when('/login', {templateUrl: 'partials/login.html',   controller: 'LoginCtrl'}).
    when('/loggedin', {templateUrl: 'partials/infobar_part.html', 'partials/nav_part.html', 'partials/main_part.html', controller: 'UserCtrl'}).
    when('/admin', {templateUrl: 'partials/infobar_part.html', 'partials/nav_part.html', 'partials/admin_part.html', controller: 'AdminCtrl'}).
    otherwise({redirectTo: '/login'});
4

1 に答える 1

4

私はこの問題を解決し、部分的と見なすものを変更します。

例: 'login' と 'logedIn' を 2 つの異なるパーシャルと考えないでください。たとえば、loginStatus_bar と呼ばれるパーシャルを使用できます。このパーシャルには 2 つ (またはそれ以上) の可能な状態 (login、loggedIn など) があります。

「loginStatus_bar」パーシャルでは、可能なすべてのバーを書き込み、必要なものを条件付きで表示するためにng-show、ng-hideを使用します。

このようなもの (「isLoggedIn」はスコープ内のブール値です):

<div ng-show="isLoggedIn" ng-controller="loggedInBar" >
</div>
<div ng-hide="isLoggedIn" ng-controller="loginBar" >
</div>

この方法では、おそらく「loginStatus_bar」パーシャルが何らかの状態でアプリケーションに常に表示されるため、ルートも必要ありません。

于 2013-02-19T10:05:25.577 に答える