我创建了网络应用程序,其中登录后有一个重定向到欢迎页面,但在这种情况下标题未更新。 这是我的 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'
});
});
这是我用于发送 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
和 LoginController
是两个不同的 Controller ,并且具有不同的范围。
更改一个中的 $scope.menu
不会在另一个中更改,因为它们没有任何父子关系。
您必须在 $rootScope
中拥有菜单,然后在登录后在相应的 Controller 中更新它。
MyApp.controller('LoginController', function ($scope, $rootScope) {
$rootScope.menu = [];
});
MyApp.controller('MainController', function ($scope, $rootScope) {
$rootScope.menu = []; // update the menu
});
否则,将其作为服务,以便您可以使用 $emit
事件并在用户登录后更新菜单。
function login() {...}
必须是服务的一部分。您必须避免在 Angular 项目中使用 jQuery
。在服务内部使用 $http
更好,并且提供与 $.ajax
关于javascript - 如何让AngularJS在登录后刷新标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29692867/