angularJS范围在HTTP get之后不会更新
angularJS scope not updating after HTTP get
我有一个angularJS应用程序,其中包括在后端使用Express +护照处理的登录功能; 直到最近工作正常,但我已经改变了一些东西,现在它不起作用,我不知道如何解决我的问题。
登录登录页面后,您将被重定向到索引,$scope.cUser.userName 变量应具有您当前的用户名,但是在我实际刷新(f5)整个页面之前,该页面不会更新用户名的范围!有趣的是,$scope.cUser.created的值确实在页面上正确更新和呈现。我可以确认快递在 JSON 中正确将用户名传递给 angular
登录控制器中的登录方法:
$scope.login = function(){
$http.post('/users/login', {
username: $scope.user.username,
password: $scope.user.password
})
.success(function(user){
toaster.pop('success', "Success!", "You have been logged in");
$rootScope.$broadcast('loggedIn', user);
$location.path('/');
})
.error(function(user){
toaster.pop('error', 'We couldn''t log you in!', 'The provided user credentials are incorrect');
$location.url('/login');
});
};
检查是否在应用程序运行时登录:
$http.get('/users/loggedin').success(function(user){
if (user.loggedin !== false){
$rootScope.$broadcast('loggedIn', user);
} else {
$rootScope.$broadcast('loggedOut');
}
});
这是我的"主控制器",它在ng视图之外的整个网站上运行:
$scope.cUser = {};
$scope.$on('loggedIn', function(event, user){
$timeout(function(){
$scope.$apply(function(){
$scope.cUser.loggedIn = true;
$scope.cUser.userName = user.username;
$scope.cUser.created = user.created;
});
});
});
$scope.$on('loggedOut', function(event){
$scope.cUser.loggedIn = false;
$scope.cUser = {};
$scope.$apply();
});
注销功能按预期工作,但页面上未呈现 $scope.cUser.userName!请帮忙!
尝试通过
打印这些函数中的用户和用户名来进行调试
$scope.$on('loggedIn', function(event, user){
//$timeout(function(){ // you don't need apply or timeout here, its automatic
//$scope.$apply(function(){
console.log('logged in', user);
$scope.cUser.loggedIn = true;
$scope.cUser.userName = user.username;
$scope.cUser.created = user.created;
//});
//});
});
$scope.$on('loggedOut', function(event){
$scope.cUser.loggedIn = false;
$scope.cUser = {};
console.log('logged out', $scope.cUser);
//$scope.$apply();
});
并在您的 html 中包含 cUser,如下所示:
<div> {{cUser}} </div> <!-- this should print a json object -->
以查看当前存储在值中的内容。
接下来,请确保您的$http调用也涵盖了错误场景:
$http.get('/users/loggedin').then(function(){
var user = response.data;
console.log('user', user);
if (user.loggedin !== false){
$rootScope.$broadcast('loggedIn', user);
} else {
$rootScope.$broadcast('loggedOut');
}
}, function(reason){
// this is the error scenario
console.log('error', reason);
});
这应该使您更接近回答问题所在。
相关文章:
- AngularJS:ng之后,重复$scope值未按预期更新
- Node.js错误“;ReferenceError:全局未定义“;在从0.10.2更新到0.12.2之后
- Bookshelf.js,在fetchAll()方法之后更新
- jQuery Slider/Carousel 在 DOM 之后更新内容
- 模板帮助程序在session.set之后未更新
- $scope之后未更新角度范围$在$broadcast之后的事件上
- 在arr.splice()之后更新变量
- Angular Directive在$http之后未更新
- 为什么在Firefox更新之后JQuery不能在我的MVC 4应用程序中工作
- HTML表未更新,在将新项推送到knocketinobservableArray之后
- angularJS范围在HTTP get之后不会更新
- 在 AJAX 回调之后,onblur 会返回到原始(或更新)字段
- 部分视图在 ajax.beginform 之后不会更新
- 我需要一些关于PHP的帮助,并在“?”之后更新URL
- 如何在 ajax 之后在选择框中获取更新的选项属性
- 保存时,在javascript计算之后,值不会更新
- 在 jQuery UI Sortable 之后更新 CollectionView 内容的最佳方式
- 在jQuery Sort之后获取更新的顺序
- 事件在用AJAX更新之后就不能工作了
- jQuery日期选择器"在“更新”之后;事件或同等事件