Angularjs 处理登录和登录页面

Question

我正在使用第 3 方客户端登录然后我有 <ng-view>对于每条路线，所以这意味着
所有导航都将在 <ng-view> 内重新加载.

然后我有一个全局页脚，它在每个部分上显示用户登录信息
所以我把它放在 <ng-view> 下.会是这样的

<ng-view></ng-view>
<div ng-controller="FooterCtrl">User logged-in Info</div>

我的问题
登录后，FooterCtrl 不会显示登录的用户信息，因为登录只会重新加载 <ng-view>没有完全重新加载。 (除非我使用 F5 手动刷新页面)。

我的问题是，

用户未登录时如何隐藏 FooterCtrl

我应该把 FooterCtrl 放在哪里？

Answer 1

在您的 FooterCtrl管制员，留意路线变化。

每当路由发生变化时，获取有关用户是否登录的信息。

因此，您的代码看起来有点像这样 - 在您的 Controller 中，具有以下代码:

$scope.$on('$routeChangeStart', function (next, current) {
    //Get the current state of the user log in.
    //Accordingly, set the variable

    //If user is logged in
    $scope.userIsLoggedIn = true;

    //Else
    $scope.userIsLoggedIn = false;
});

因此，您的范围现在知道用户是否在每次路由更改时登录 - 我假设是，如果您的应用程序配置正确，每次将不同的模板加载到 ng-view .

现在，您的 View 可以很简单:

<div ng-view>
</div>

<div ng-controller="FooterCtrl">
    <footer ng-show="userIsLoggedIn">
        <!-- Info to show when user is logged in -->
    </footer>

    <footer ng-hide="userIsLoggedIn">
        <!-- Info to show when user is NOT logged in -->
    </footer>
</div>

因此，您的页脚会根据用户的登录状态显示数据。每次 View 模板更改时， Controller 都会确定登录状态并相应地显示 View 。