Как заставить AngularJS обновить заголовок после входа в систему

Я создал веб-приложение, в котором есть перенаправление после входа на страницу приветствия, но заголовок в этом случае не обновляется. Вот мой код Angular:

MyApp.controller('LoginController', function ($scope) {
    $scope.login = function () {
        login();
        var name = "";
        if (document.cookie.indexOf("name") !== -1)
            name = document.cookie.split('=')[2];

        $scope.menu = [
            {
                title: 'Product',
                url: 'product'
            },
            {
                title: 'About',
                url: 'about'
            },
            {
                title: 'Contact',
                url: 'contact'
            },
            {
                title: name,
                url: 'welcomeUser'
            },
            {
                title: 'LogOut',
                url: 'logout'
            }
        ];

        $scope.refresh();
    };
});

MyApp.controller('MainController', function ($scope) {
    var name = "";
    if (document.cookie.indexOf("name") !== -1)
        name = document.cookie.split('=')[2];
    if (document.cookie.indexOf("name") === -1 && (name === "" || name === undefined)) {
        $scope.menu = [
            {
                title: 'Product',
                url: 'product'
            },
            {
                title: 'About',
                url: 'about'
            },
            {
                title: 'Contact',
                url: 'contact'
            },
            {
                title: 'Register',
                url: 'register'
            },
            {
                title: 'Login',
                url: 'login'
            }
        ];
    } else {
        $scope.menu = [
            {
                title: 'Product',
                url: 'product'
            },
            {
                title: 'About',
                url: 'about'
            },
            {
                title: 'Contact',
                url: 'contact'
            },
            {
                title: name,
                url: 'welcomeUser'
            },
            {
                title: 'LogOut',
                url: 'logout'
            }
        ];
    }
});

Angular код конфигурации:

MyApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'partials/home.html',
            controller: 'MainController'
        })
        .when('/login', {
            templateUrl: 'partials/login.html',
            controller: 'LoginController'
        })
        .otherwise({
            redirectTo: '/404'
        });
});

И вот мой код JS для отправки запроса POST - функция входа пользователя:

function login() {
    var username = document.getElementById('usernameLogin').value;
    var password = document.getElementById('passwordLogin').value;

    if (!username.trim() || username.length === 0 || !password.trim() || password.length === 0) {
        document.getElementById('wrong_username').style.display = 'block';
        document.getElementById('wrong_password').style.display = 'block';
        return;
    }

    var json = {
        username: username,
        password: sha1(password)
    };

    $.ajax({
        type: "POST",
        url: "http://localhosts:7777/account_management/login_user",
        data: JSON.stringify(json),
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data === "true") {
                document.cookie = "";
                document.cookie = "username=" + username;
                window.location.href = "/#/welcomeUser";
            } else if (data === "false") {
                document.getElementById("wrong_password").style.display = "block";
            } else {
                alert(data);
            };
        },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });
}

Сама авторизация отлично работает, но $scope.menu обновляется только после обновления страницы.

Есть ли идеи, как это исправить?

Ответ 1

MainController ad LoginController являются двумя разными контроллерами и имеют разные области действия.

Изменение $scope.menu в одном не изменяется в другом, так как у них нет родительских отношений.

Вы должны либо иметь меню в $rootScope, а затем обновлять его в соответствующих контроллерах после входа в систему.

MyApp.controller('LoginController', function ($scope, $rootScope) {
  $rootScope.menu = [];
});

MyApp.controller('MainController', function ($scope, $rootScope) {
  $rootScope.menu = []; // update the menu
});

Иначе, используйте его как службу, чтобы вы могли использовать событие $emit и в нем обновлять меню после входа пользователя.

function login() {...} должен быть частью сервиса. Вы должны избегать использования jQuery в проекте angular. Используйте $http внутри службы, что предпочтительнее и обеспечивает те же функции, что и $.ajax

Ответ 2

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

В LoginController

$rootScope.$broadcast('userLoggedIn');

На MainController

$rootScope.$on('userLoggedIn', function () {
    //Code to apply modification to your menu
});

Если вам нужно передать параметры, вы можете использовать второй аргумент метода $broadcast следующим образом:

$rootScope.$broadcast('userLoggedIn', {key: 'value'});

$rootScope.$on('userLoggedIn', function (params) {
    console.log(params.key); //value
});

Ответ 3

Решение 1:

Вам нужно использовать $rooteScope для переменных области вызова от другого контроллера.

Используйте $rooteScope.objectName в своем контроллере входа вместо использования $scope.objectName.

Как

//Назначение деталей меню в переменной области в главном контроллере

MyApp.controller('MainController', function ($scope) {
  $scope.menu = [
            {
                title: 'Product',
                url: 'product'
            },
            {
                title: 'About',
                url: 'about'
            },
            {
                title: 'Contact',
                url: 'contact'
            },
            {
                title: 'Register',
                url: 'register'
            },
            {
                title: 'Login',
                url: 'login'
            }
        ];
});

//, затем вызовите переменные области видимости через rootScope из контроллера входа

MyApp.controller('LoginController', function ($scope,$rootScope ) {
  $rootScope.menu = [
            {
                title: 'Product',
                url: 'product'
            },
            {
                title: 'About',
                url: 'about'
            },
            {
                title: 'Contact',
                url: 'contact'
            },
            {
                title: 'Register',
                url: 'register'
            },
            {
                title: 'Login',
                url: 'login'
            }
        ];
});

Решение 2

Ваш window.location.href = "/#/welcomeUser"; - это код javascript, поэтому он не рассматривает объекты области

Вам нужно изменить window.location.href = "/#/welcomeUser"; до $location.path('/#/welcomeUser');

также вам нужно настроить $location на вашем контроллере

Решение 3

Если выше два решения не работают, вам необходимо вручную перезагрузить страницу с помощью $route.reload()

Но третье решение не очень хорошо, потому что оно сделает перезагрузку страницы. Но он решает вашу проблему, чтобы вручную перезагрузить экран.