javascript 登录后如何使AngularJS刷新标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29692867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make AngularJS refresh header after login
提问by Taras Kovalenko
I created web-application, in which there is a redirect after login to welcome page, but the header is not updated in this case. Here is my Angular code:
我创建了 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'
}
];
}
});
Angular config code:
角度配置代码：
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'
});
});
And here is my JS code for POST request sending - login user function:
这是我用于 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);
}
});
}
The authorizationitself works fine, but $scope.menuupdates only after page refresh.
该授权本身工作正常，但$scope.menu只有后刷新页面更新。
Is there any ideas how to fix it?
有什么想法可以解决它吗？
采纳答案by mohamedrias
MainControllerad LoginControllerare two different controllers and are having different scopes.
MainControlleradLoginController是两个不同的控制器并且具有不同的范围。
Changing $scope.menuin one doesn't change in another as they don't have any parent child relationship.
改变$scope.menu一个不会改变另一个，因为他们没有任何父子关系。
You must either have the menu in $rootScopeand then update it in the respective controllers after login.
您必须有菜单$rootScope，然后在登录后在相应的控制器中更新它。
MyApp.controller('LoginController', function ($scope, $rootScope) {
$rootScope.menu = [];
});
MyApp.controller('MainController', function ($scope, $rootScope) {
$rootScope.menu = []; // update the menu
});
Else, have it as a service so that you can use $emitevent and in it to update the menu once the user has logged in.
否则，将它作为一项服务，以便您可以$emit在用户登录后使用事件并在其中更新菜单。
The function login() {...}must be part of a service. You must avoid using jQueryin an angular project. Use $httpinside service which is preferable and provides same functionality as $.ajax
本function login() {...}必须是服务的一部分。您必须避免jQuery在 angular 项目中使用。使用$http更好的内部服务，并提供与以下相同的功能$.ajax
回答by Blackus
Instead of having your menu in $rootScope, you could use event to warn your menu that the user has logged in and that he should reload itself.
$rootScope您可以使用事件来警告您的菜单用户已登录并且他应该重新加载自己，而不是将您的菜单放入。
On LoginController
在登录控制器上
$rootScope.$broadcast('userLoggedIn');
On MainController
在主控制器上
$rootScope.$on('userLoggedIn', function () {
//Code to apply modification to your menu
});
If you have to pass parameters, you can use the second argument of $broadcastmethod like this :
如果必须传递参数，可以使用$broadcast方法的第二个参数，如下所示：
$rootScope.$broadcast('userLoggedIn', {key: 'value'});
$rootScope.$on('userLoggedIn', function (params) {
console.log(params.key); //value
});
回答by Ramesh Rajendran
Solution 1 :
解决方案1：
You need to use $rooteScopefor call scope variables from another controller.
您需要使用$rooteScope来自另一个控制器的调用范围变量。
Please use $rooteScope.objectNamein your login controller instead of using$scope.objectName.
请$rooteScope.objectName在您的登录控制器中使用，而不是使用$scope.objectName.
Like
喜欢
// Assign the menu details on scope variable in main controller
// 在主控制器的作用域变量上分配菜单细节
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'
}
];
});
//then call the scope variables via rootScope from login controller
//然后从登录控制器通过 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'
}
];
});
Solution 2
解决方案2
Your window.location.href = "/#/welcomeUser";is a javascript code, So it is not consider the scope objects
你window.location.href = "/#/welcomeUser";是一个javascript代码，所以它不考虑范围对象
You need to change window.location.href = "/#/welcomeUser";to $location.path('/#/welcomeUser');
您需要更改 window.location.href = "/#/welcomeUser";为 $location.path('/#/welcomeUser');
also you need to configure the $locationon your controller
您还需要$location在控制器上配置
Solution 3
解决方案3
If above two solutions are not working, you need to manually reload the page by using $route.reload()
如果以上两种解决方案都不起作用，则需要使用以下命令手动重新加载页面 $route.reload()
But the third solution is not good, because it will make a page reload. But it's solve your issue to manually reload the screen.
但是第三个方案并不好，因为它会使页面重新加载。但是手动重新加载屏幕可以解决您的问题。
