Question

我一直在我的Angular应用程序中实现登录功能，并且大部分时间都在运行。我试图在标题部分显示userName。但它们在登录后才会更新，直到刷新屏幕。我需要添加什么才能刷新数据？

我包括我的标题栏：

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

这是我的顶级导航部分，我需要双向绑定Session。

(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();
        };
    }
})();

这是我的会话服务：

(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;
    });
})();

包括这样的导航，它只运行一次。因此，一旦在我的登录页面上实际设置了Session，它就不会在此处更新。我错过了什么吗？有什么更好的方法来实现这一目标？

Answer 1

有几种选择，第一种应该可行。

首先，您应该将其更改为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();
    });
};

Answer 2

这是一个示例控制器，用于显示注入的会话详细信息。我假设，Session对象包含数据。会话是生成的服务。

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

样本用法

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

角度会话var不更新

2 个答案: