Question

我正在开发一个后台，使用Angular，HTML＆amp; jQuery有一个单页应用程序。我在用户身份验证。我创建了一个cookie来拥有一个“用户会话”，我可以在用户注销时将其销毁。但我使用Bootstrap，我有一个带有用户名的下拉菜单，左边有一个菜单，我想在用户断开连接时隐藏它们。

每个菜单都有一个控制器，如果我重新执行它们，它将隐藏我想要的内容。

示例：

.controller('SessionController', ['$scope', '$http', '$location', '$cookies', function ($scope, $http, $location, $cookies) {
            if (typeof $cookies.userSession === "undefined") {
                $(".nav.navbar-nav.navbar-right").hide();
                $location.path("/");
            } else {
                $("#userLogin").text($cookies.userSession);
                $(".nav.navbar-nav.navbar-right").show();
                $location.path("/customers");
            }
        }])

我已经阅读了有关$ scope.digest（）和$ scope.apply（）的内容，但我无法做到。也许有指令？

Answer 1

如果您使用ui-router，则可以轻松强制重新加载：

.controller('SessionController', ['$scope', '$http', '$location', '$cookies','$state', function ($scope, $http, $location, $cookies,$state) {
            if (typeof $cookies.userSession === "undefined") {
                $(".nav.navbar-nav.navbar-right").hide();
                $state.go('home',{},{reload:'true'});
            } else {
                $("#userLogin").text($cookies.userSession);
                $(".nav.navbar-nav.navbar-right").show();
                $state.go('customers',{},{reload:'true'});
            }
        }])

请注意，此代码片段使用的状态home和customers应该在其他位置定义。

Answer 2

我确信有很多方法可以实现你真正想要做的事情（显示/隐藏内容，而不是重新构建控制器）。最简单的可能是在范围上创建isLoggedIn属性并使用ng-show / ng-hide指令。或者您可以将登录信息分成自己的模板，然后使用ng-include显示登录表单或真实内容。

解决您对cookie和重新加载的担忧：您只是不考虑Angular :)设置cookie可以在多个页面或通过页面重新加载时使用。但是，如果要利用Angular根据基础数据自动更新显示内容的能力（无需重新加载页面），则需要修改基础数据。我的意思是，您需要在$scope上创建一个属性，例如isLoggedIn，并在设置Cookie时更新它。

Answer 3

我做了一些与我最新的应用程序非常相似的东西，但你不刷新控制器。这是更多jquery式的思考。您想使用ng-show / ng-hide，并在控制器中设置正确的变量：

<div ng-show="user.loggedIn"><a href="/logout" ng-click="logout()">Logout</a></div>
<div ng-show="!user.loggedIn"><a href="/login">Login</a></div>

（您可以轻松地将下拉菜单放在上面的div中）

然后你的控制器应该

.controller('SessionController', function ($scope,AuthSvc) {
      $scope.user = AuthSvc.user;
      $scope.logout = function() {AuthSvc.logout();};
    });

当用户退出时，只需将AuthSvc.user.loggedIn设置为false，它就会全面继承。这就是双向绑定的美妙。

.factory('AuthSvc',function() {
   return {
     user: {loggedIn:false},
     logout : function() {
        // do whatever other logout stuff you need, like deleting sessions
        this.user.loggedIn = false;
     },
     login : function() {
        // do whatever other login stuff you need, like validating with the server
        this.user.loggedIn = true;
     }
   };
});

如何在路由重定向时刷新Angular控制器

3 个答案: