Угловая сессия var не обновляется

Question

Я внедряю функцию входа в мое приложение Angular и работаю по большей части. Я пытаюсь показать имя пользователя в разделе заголовка. Но он не будет обновляться после входа в систему до обновления экрана. Что мне нужно добавить для обновления этих данных?

Я в том числе мой заголовок панели, как так:

<div data-ng-include="'app/layout/topnav.html'"></div> 

Вот мой главный раздел нав, что мне нужно два способа связывания для сессии.

(function() { 
    'use strict'; 

    angular 
     .module('app.layout') 
     .controller('TopNav', TopNav); 

    TopNav.$inject = ['$route', 'routehelper', 'Session', 'authentication']; 

    function TopNav($route, routehelper, Session, authentication) { 
     /*jshint validthis: true */ 
     var vm = this; 
     var routes = routehelper.getRoutes(); 
     vm.isCurrent = isCurrent; 
     vm.userName = Session.userName; 

     activate(); 

     function activate() { getNavRoutes(); } 

     function getNavRoutes() { 
      vm.navRoutes = routes.filter(function(r) { 
       return r.settings && r.settings.nav; 
      }).sort(function(r1, r2) { 
       return r1.settings.nav - r2.settings.nav; 
      }); 
     } 

     function isCurrent(route) { 
      if (!route.title || !$route.current || !$route.current.title) { 
       return ''; 
      } 
      var menuName = route.title; 
      return $route.current.title.substr(0, menuName.length) === menuName ? 'current' : ''; 
     } 

     vm.logout = function() { 
      vm.userName = null; 
      authentication.logout(); 
     }; 
    } 
})(); 

Вот моя служба Session:

(function() { 
    'use strict'; 

    angular.module('blocks.authentication').service('Session', function() { 
     this.create = function(userId, userName, userRole) { 
      this.userId = userId; 
      this.userName = userName; 
      this.userRole = userRole; 
     }; 
     this.destroy = function() { 
      this.userId = null; 
      this.userName = null; 
      this.userRole = null; 
     }; 
     return this; 
    }); 
})(); 

В том числе нав, как это, она работает только один раз. Поэтому, когда сеанс фактически установлен на моей странице входа в систему, он не обновляется здесь. Я что-то упускаю? Что это лучший способ достичь этого?

Answer 1

Это образец контроллера для отображения введенных сведений о сеансе. Я предположил, что объект Session содержит данные. Сессия - это сгенерированная услуга.

angular.module('myApp') 
.controller('SessionController', function($scope, Session) { 
    $scope.userName = Session.userName; 
} 

Пример использования

<div>{{userName}}</div> 

Answer 2

Есть несколько вариантов, то первый должен работать.

Во-первых, вместо установки vm.userName = Session.userName вы должны изменить его vm.userName = Session.getUserName() где Session.getUserName, как:

function getUserName() { 
    return this.userName; 
} 

Это происходит потому, что, когда контроллер инстанциируется он устанавливает vm.userName к тому, что значение Session.userName находится в этой точке время. Он никогда не знает об изменениях. Установив его на функцию, он должен проверить это в течение каждого цикла $digest.

В противном случае вы можете использовать хороший старомодный шаблон observer, чтобы решить проблему.

В TopNav контроллера:

// Register the setting of vm.userName as an observer 
Session.registerObserverCallback(function() { 
    vm.userName = Session.userName; 
}); 

А потом в Session:

this.create = function(userId, userName, userRole) { 
    this.userId = userId; 
    this.userName = userName; 
    this.userRole = userRole; 

    // Everytime this changes, notify everyone 
    this.notifyObservers(); 
}; 

// Since almost everything in angular is a singleton, anyone can register here 
// and whenever notifyObservers() is called, everyone gets notified of the new values 
var observerCallbacks = []; 

var registerObserverCallback = function (callback) { 
    observerCallbacks.push(callback); 
}; 

var notifyObservers = function() { 
    angular.forEach(observerCallbacks, function (callback) { 
     callback(); 
    }); 
};