Javascript 登录后如何使AngularJS刷新头

我创建了一个web应用程序，在该应用程序中，登录到欢迎页面后会有一个重定向，但在本例中不会更新标题。 这是我的角度代码：

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'
            }
        ];
    }
});

角度配置代码：

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

下面是我的POST请求发送-登录用户功能的JS代码：

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

仅在页面刷新后更新

---

有没有办法修复它？

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

事件，并在用户登录后在其中更新菜单

函数login（）{…}

必须是服务的一部分。必须避免在角度项目中使用

jQuery

。使用

$http

内部服务，该服务更可取，并提供与

$相同的功能。ajax

解决方案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'
            }
        ];
});

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'
            }
        ];
});

---

//然后从登录控制器通过rootScope调用范围变量

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'
            }
        ];
});

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（）

但是第三种解决方案并不好，因为它会使页面重新加载。但手动重新加载屏幕是解决问题的关键
 您可以使用事件来警告您的菜单，用户已登录，应该重新加载自己，而不是将菜单置于
$rootScope
中

关于LoginController

$rootScope.$broadcast('userLoggedIn');

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

关于主控制器

$rootScope.$broadcast('userLoggedIn');

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

更新：为什么在两个控制器中都使用
$rootScope
？您可以在主控制器中使用$scope，也可以在登录中使用
$rootScope
controller@mohamedrias谢谢；）我确实知道广播的概念。谢谢