angular ng-show oraz ng-hide chowa elementów div DYNAMICZNIE

0

Hej mam taki problem z chowaniem diva(login/logout/register) w zależności od zmiennej postawionej na $scopie.

top-bar.html:
c44f7492b4.png

<div class="top-bar" ng-controller="authCtrl">
  <div class="logo pull-left">
    <a href="#/home">Kuriex</a>
  </div>
  <div ng-show="loggedIn()" class="user-bar pull-right" style="color:white;">
    <a href="#/login">Zaloguj</a>
  </div>
  <div ng-hide="loggedIn()" class="user-bar pull-right" style="color:white;">
    <a href="#/logout" ng-click="logout()">Wyloguj</a>
  </div>
  <div ng-show="loggedIn()" class="user-bar pull-right" style="color:white;">
    <a href="#/register" >Rejestracja</a>
  </div>
  <div ng-click="getCurrentUser()">
    <div class="user-bar pull-right" style="color:white;">Aktualny użytkownik</div>
  </div>
  <div>
    <div class="user-bar pull-right" style="color:white;">Zalogowany: {{loggedIn()}}</div>
  </div>
</div>

index.html:

<body ng-app="kuriexApp">
  <div ng-include="'top-bar.html'"></div>

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div ng-include="'nav-bar.html'"></div>
      <ui-view></ui-view>
    </div>
  </div>

  <script src="resources/angular.min.js"></script>
  <!-- kolejne skrypty -->

kontroller:

app.controller('authCtrl', ['appUtils', 'authService', '$scope', '$state', '$http', function(appUtils, authService, $scope, $state, $http){
  var authPath = 'auth';
  var users = 'users';

  $scope.loggedIn = function() {
    console.log("isLoggedIn : ", authService.isLoggedIn());
    return authService.isLoggedIn();
  };

  $scope.login = function(loginCredentials) {
    $http({
      method: 'POST',
      url: appUtils.kuriexPath + '/' + authPath + '/login',
      data: {
        "credentials": {
          "email": loginCredentials.email,
          "password": loginCredentials.password
        }
      }
    }).then(function successCallback(response) {
      authService.setToken(response.data.login_token);
      authService.setLoggedIn(true);
      $state.go('packages');
    }, function errorCallback() {
      console.log("NIE UDAŁO SIĘ ZALOGOWAĆ!!!")
    });
  };

  $scope.logout = function() {
    $http({
      method: 'DELETE',
      url: appUtils.kuriexPath + '/' + authPath + '/logout'
    }).then(function successCallback(response) {
      authService.setToken("");
      authService.setLoggedIn(false);
    }, function errorCallback() {
      console.log("NIE UDAŁO SIĘ WYLOGOWAĆ!!!")
    });
  };

  $scope.register = function(userDetails) {
    $http({
      method: 'POST',
      url: appUtils.kuriexPath + '/' + users,
      data: {
        "user_data": {
          "username": userDetails.username,
          "password": userDetails.password,
          "email": userDetails.email
        }
      }
    }).then(function successCallback(response) {
      $state.go('login');
    }, function errorCallback() {
      console.log("NIE UDAŁO SIĘ UTWORZYĆ UŻYTKOWNIKA!!!")
    });
  };

  $scope.getCurrentUser = function() {
    $http({
      method: 'GET',
      url: appUtils.kuriexPath + '/' + users + '/current'
    }).then(function successCallback(response) {
      $scope.currentUser = response.data;
      console.log("Aktualny użytkownik : ", response.data);
    }, function errorCallback() {
      console.log("NIE UDAŁO SIĘ POBRAĆ AKTUALNEGO UŻYTKOWNIKA!!!")
    });
  };
}]);

serwis:

app.service('authService', ['$window', function($window){
  var o = {
    getToken: function() {
      return $window.localStorage['token'];
    },

    setToken: function(givenToken) {
      $window.localStorage['token'] = givenToken;
    },

    isAuthed: function() {
      return ($window.localStorage['token'] != "" && $window.localStorage['token'] != null);
    },

    isLoggedIn: function() {
      return $window.localStorage['loggedIn'];
    },

    setLoggedIn: function(loggedIn) {
      console.log("set loggedIn = " , loggedIn);
      $window.localStorage['loggedIn'] = loggedIn;
    }
  };
  
  return o;
}]);

część konfiguracji routingu:

.state('login', {
        url: '/login',
        templateUrl: '/login.html',
        controller: 'authCtrl'
      })
      .state('logout', {
        url: '/logout',
        templateUrl: '/logout.html',
        controller: 'authCtrl'
      })
      .state('register', {
        url: '/register',
        templateUrl: '/register.html',
        controller: 'authCtrl'
      });

Problem jest taki że w konsoli wszystko ładnie pokazuje : loguje się, wypisuje mi że loggedIn jest na true ale co z tego jak div zaloguj oraz rejestruj nie znika. To samo w drugą stronę. Prosze o pomoc, jak to rozwiązać, ponieważ sam już nie mam siły do tego.
Pozdrawiam

0

Dziwny sposob na sprawdzenie, czy faktycznie user jest zalogowany tak swoja droga. Ja polecam odwolac sie do obiektu, ktore zwroci Ci API, jesli takowe posiadasz.

Sprobuj w ten sposob

$scope.isLogedIn =  authService.isLoggedIn

a pozniej w kontrolerze

<div ng-if="isLogedIn()">cos</div> 

Nie wglebialem sie w kod mocno, ale sporobwac mozesz, jesli to nie mozesz to wrzuc to gdzies, bo wole grzebac, wtedy mi sie chce, tak to zapal trace, przerob to jakos na szybko zebys nie musial robic $http, tylko haslo i login miec juz w jsie podane.

0

"Nie wglebialem sie w kod mocno, ale sporobwac mozesz, jesli to nie mozesz to wrzuc to gdzies, bo wole grzebac, wtedy mi sie chce, tak to zapal trace, przerob to jakos na szybko zebys nie musial robic $http, tylko haslo i login miec juz w jsie podane."

ŻE COOOOOOOOOOOOOOO?????

1 użytkowników online, w tym zalogowanych: 0, gości: 1