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

Odpowiedz Nowy wątek
Wybitny Samiec
2016-04-06 19:18
Wybitny Samiec
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

Pozostało 580 znaków

2016-04-06 20:53

Rejestracja: 4 lata temu

Ostatnio: 4 lata temu

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.

edytowany 2x, ostatnio: WerdenSehen, 2016-04-06 20:58

Pozostało 580 znaków

Wybitny Samiec
2016-04-06 22:20
Wybitny Samiec
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?????

Zrob wstawke do jsfiddla czy czegokolwiek, tylko ze zamiast robic $http do "appUtils", to po prostu ustaw statyczny login i haslo, tak aby latwo bylo mozna na tym pracowac. - WerdenSehen 2016-04-06 22:39

Pozostało 580 znaków

Odpowiedz

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