2

我的 Angular 应用程序有一个 index.html，里面只有一个<div ng-view></div>。在加载时，用户会看到来自单个局部视图的登录屏幕，通过 $routeProvider 提供服务，并且在登录成功时，路由更改为登录的局部：

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

但是，一旦登录，我希望同时显示三个单独的部分：信息栏、导航和主要（主要可以与当前正在查看的任何导航项互换）。目前在我的 login_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，即（假设的）：

登录_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”视为两个不同的部分。例如，您可以使用称为 loginStatus_bar 的部分。这部分有两个（或更多）可能的状态（登录、登录等...）

在您的“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 回答