Question

我不想根据codeigniter中的会话状态动态显示菜单项。让我通过以下解释向您展示我的代码。

这是我的index.html文件

                    <li><p ng-bind-html="link1" ></p></li>
                    <li><p ng-bind-html="link2" ></p></li>

该链接数据来自此控制器

sessionFactory.isLoggedIn().then(function(data){
    var loggedIn = data.logged_in;
    if(loggedIn == true){
        $scope.link1 = $sce.trustAsHtml('<a href="#/my_profile">My profile</a>');
        $scope.link2 = $sce.trustAsHtml('<a ng-click="logOut()" style=\"cursor: pointer;" >Logout</a>');
    }else{
        $scope.link1 = $sce.trustAsHtml('<a href="#/login">Login</a>');
        $scope.link2 = $sce.trustAsHtml('<a href="#/register" >Register</a>');
    }
})

这是我的会话工厂

//Factory for Session
app.factory('sessionFactory', ['$http', '$location', function($http, $location){
    var factory = {};

    factory.logOutUser = function(){
        console.log("woot");
        return $http({
            method: 'POST',
            url: $location.protocol() + '://' + $location.host() + '/server/api/users/logout'
        }).then(function successCallback(response) {
            console.log(response);
        },function errorCallback(response) {
            console.log('error logging out: ' + response);
        });
    }

    factory.isLoggedIn = function(){
        console.log("checking login");
        return $http({
            method: 'GET',
            url: $location.protocol() + '://' + $location.host() + '/server/api/users/isLoggedIn'
        }).then(function successCallback(response) {
            console.log(response.data);
            return response.data;
        },function errorCallback(response) {
            console.log('Checking login failed: ' + response);
        });
    }

    /*
    /server/api/users/logoutfactory.currentUserId = function(){
        return $http.get($location.protocol() + '://' + $location.host() + '/server/api/users/userId');
    }
    */
    return factory;
}]);

Api /server/api/users/isLoggedIn返回

{"success":true,"logged_in":true}

或

{"success":true,"logged_in":false}

所以我遇到的问题是，当用户登录或注销<li></li>时，项目不会发生变化。我必须按f5刷新网页如果您需要任何其他信息，请告诉我，我会提供。

提前谢谢。

Answer 1

你可以使用

在$rootScope上发起一个事件

$rootScope.$emit("authenticationChanged")

当用户登录和退出然后在控制器运行

时，在会话工厂上

＆＃13;

function checkIfLogged() {
  var loggedIn = data.logged_in;
  if (loggedIn == true) {
    $scope.link1 = $sce.trustAsHtml('<a href="#/my_profile">My profile</a>');
    $scope.link2 = $sce.trustAsHtml('<a ng-click="logOut()" style=\"cursor: pointer;" >Logout</a>');
  } else {
    $scope.link1 = $sce.trustAsHtml('<a href="#/login">Login</a>');
    $scope.link2 = $sce.trustAsHtml('<a href="#/register" >Register</a>');
  }
}
checkIfLogged(); //RUN THE FIRST TIME THE PAGE LOADS

$rootScope.$on("authenticationChanged", function(){
    checkIfLogged(); //RUN WHEN AUTHENTICATION CHANGE
});

＆＃13;

有关事件的更多信息，请检查https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

Answer 2

您可以尝试使用函数来获取链接内容：

<li><p ng-bind-html="getLink1Content(false)"></p></li>
<li><p ng-bind-html="getLink2Content(false)"></p></li>

$scope.getLink1Content = function (loggedIn) {
    var linkContent = loggedIn ? '<a href="#/my_profile">My profile</a>' : '<a href="#/login">Login</a>';

    return linkContent;
};

$scope.getLink2Content = function (loggedIn) {
    var linkContent = loggedIn '<a ng-click="logOut()" style=\"cursor: pointer;" >Logout</a>' : '<a href="#/register" >Register</a>';

    return linkContent;
}

sessionFactory.isLoggedIn().then(function(data){
    var loggedIn = data.logged_in;

    $scope.getLink1Content(loggedIn);
    $scope.getLink2Content(loggedIn);
});

使用Angular和Codeigniter根据会话值更改菜单

2 个答案: