Не могу заставить ng-hide & ng-show работать с токенами

Question

Моя проблема похожа на это: нг-шоу и нг-скрыть с jwt

Хотя я изменил в соответствии с инструкциями user3735441, я все еще не могу заставить их работать должным образом:

Обслуживание:

'use strict';

/**
 * @ngdoc service
 * @name ToDoManagerApp.authToken
 * @description
 * # authToken
 * Factory in the ToDoManagerApp.
 */
angular.module('ToDoManagerApp').factory('authToken', function($window) {
    var storage = $window.localStorage;
    var cachedToken;
    var userToken = 'userToken';
    var isAuthenticated = false;
    // Public API here
    var authToken = {
        setToken: function(token) {
            cachedToken = token;
            storage.setItem(userToken, token);
            isAuthenticated = true;
        },
        getToken: function() {
            if(!cachedToken)
              cachedToken = storage.getItem(userToken);

            return cachedToken;
        },
        isAuthenticated: function() {
            return !!authToken.getToken();
        },
        removeToken: function() {
            cachedToken = null;
            storage.removeItem(userToken);
            isAuthenticated = false;

        }
    };

    return authToken;
});

Контроллер:

angular.module('ToDoManagerApp').controller('HeaderCtrl', function($scope, authToken) {
    $scope.isAuthenticated = authToken.isAuthenticated;

});

HTML:

<div ng-controller = "HeaderCtrl" class="header">
  <div class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#/">ToDoManager</a>
      </div>

      <div class="collapse navbar-collapse" id="js-navbar-collapse">

        <ul class="nav navbar-nav">
          <li ui-sref-active="active">
            <a ui-sref="main">Home</a>
          </li>
          <li ng-hide="isAuthenticated()" ui-sref-active="active">
            <a ui-sref="register">Register</a>
          </li>
          <li ng-show="isAuthenticated()" ui-sref-active="active">
            <a ui-sref="logout">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

То, что я пытаюсь сделать, это:

1 - показать регистр, скрыть выход, когда токен не установлен (не аутентифицирован) ИЛИ 2 - показать выход, скрыть регистр, когда токен установлен (аутентифицирован)

На данный момент я застрял с первым состоянием, аутентифицирован или нет, я не вижу кнопку выхода из системы.

Answer 1

Я полностью забыл добавить 'res' в мой контроллер регистра, поэтому он не был обновлен:

$http.post(url, user)
            .success(function(res) {
                alert('success', 'OK!', 'You are now registered');
                authToken.setToken(res.token);
            })

Answer 2

Вы получаете доступ к модели $scope с ng-hide а также ng-show, В вашем Сервисе вы настраиваете isAuthenticated в ложь, и никогда не устанавливая его в True. Таким образом, ваше приложение застряло в вашем первом состоянии, где isAuthenticated ложно

Answer 3

Это происходит потому, что ваша переменная в вашем контроллере не обновляется, когда она изменяется на вашем заводе. Чтобы обойти это, я обычно использую $broadcast. Так что на вашем заводе вы бы имели такую ​​функцию, как эта...

var broadcastValue = function() {
  $rootScope.$broadcast('IsAuthenticated');
}

Затем вы вызываете эту функцию в любой момент, когда вы хотите, чтобы получатели проверяли переменную.

Тогда в вашем контроллере у вас будет что-то подобное для приема трансляции

$scope.$on('IsAuthenticated', function() {
  $scope.isAuthenticated = authToken.isAuthenticated;
});

Это будет гарантировать, что ваш контроллер видит, когда значение изменяется.

Также смотрите этот пост.

$ on и $ трансляция в угловых