我试图在主页上添加一个简单的功能来显示当前登录的用户。 我发送一个GET到/ user端点返回原理。 这个Angular的学习曲线让我慢慢拉出所有的头发，因为我无法弄清楚为什么在其他所有工作都不起作用的情况下这种方式无效。 我能想到为什么它可能不起作用的唯一原因是我已经在不同的控制器（用于登录）向/用户发送GET，但我不知道为什么这会导致它甚至不会出现在Chrome中XHR。
index.html的：
<!doctype html> <html ng-app="wishingWell"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="/css/normalize.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <script src="/javascript/app.js"></script> <title>Wishing Well</title> </head> <body> <nav class="nav" ng-controller="home as controller"> <ul class="navback"> <li> <a class="active" href="#/">The Well</a> </li> <li ng-hide="!authenticated"> <a href="#/profile" >Profile</a> </li> <li ng-hide="authenticated"> <a href="#/sign-up">Sign Up</a> </li> <li ng-hide="authenticated"> <a href="#/login">Log In</a> </li> <li ng-hide="!authenticated"> <a href="" ng-click="controller.logout()">Sign Out</a> </li> <li id="right" ng-hide="!authenticated"> <p>{{controller.user.name}}</p> </li> </ul> </nav> <div ng-view></div> <script src="/javascript/wishAJAX.js"></script> </body> </html>app.js：
var wishingWell = angular.module('wishingWell', [ 'ngRoute' ]); wishingWell.config(function($routeProvider, $httpProvider) { $routeProvider.when('/', { templateUrl : 'home.html', controller : 'home', controllerAs: 'controller' }).when('/login', { templateUrl : 'login.html', controller : 'navigation', controllerAs: 'controller' }).when('/sign-up', { templateUrl : 'sign-up.html', controller : 'register', controllerAs: 'controller' }).otherwise('/'); $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }); wishingWell.controller('home', function($rootScope, $http, $location) { var jsonResponse; var jsonString; var self = this; self.user = {}; $http.get('user').then(function(response) { jsonString = JSON.stringify(response.data); jsonResponse = JSON.parse(jsonString); self.user.name = jsonResponse.principal[0].username; console.log(self.user.name); }); self.logout = function() { $http.post('logout',{}).finally(function() { $rootScope.authenticated = false; $location.path("/"); }); } });让我知道是否有任何其他控制器你需要知道为什么这不起作用。 Spring中的REST控制器适用于登录控制器，非常简单，所以我没有包含它。 home.html被注入，但在这里不相关，因为我将名称放在“nav”中的最后一个“li”元素中，并在nav部分中声明了该控制器。 注销功能也很有效，因此非常感谢任何想法。
I'm trying to add a simple functionality to the home page that displays the currently logged in user. I'm sending a GET to the /user endpoint which returns the principle. This Angular learning curve is causing me to slowly pull all my hair out because I cannot figure out why this doesn't work when everything else is working. The only reason I can think of why it may not work is that I'm already sending a GET to /user in a different controller (for login), but I don't why that would cause it not to even show up in Chrome XHR.
index.html:
<!doctype html> <html ng-app="wishingWell"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="/css/normalize.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <script src="/javascript/app.js"></script> <title>Wishing Well</title> </head> <body> <nav class="nav" ng-controller="home as controller"> <ul class="navback"> <li> <a class="active" href="#/">The Well</a> </li> <li ng-hide="!authenticated"> <a href="#/profile" >Profile</a> </li> <li ng-hide="authenticated"> <a href="#/sign-up">Sign Up</a> </li> <li ng-hide="authenticated"> <a href="#/login">Log In</a> </li> <li ng-hide="!authenticated"> <a href="" ng-click="controller.logout()">Sign Out</a> </li> <li id="right" ng-hide="!authenticated"> <p>{{controller.user.name}}</p> </li> </ul> </nav> <div ng-view></div> <script src="/javascript/wishAJAX.js"></script> </body> </html>app.js:
var wishingWell = angular.module('wishingWell', [ 'ngRoute' ]); wishingWell.config(function($routeProvider, $httpProvider) { $routeProvider.when('/', { templateUrl : 'home.html', controller : 'home', controllerAs: 'controller' }).when('/login', { templateUrl : 'login.html', controller : 'navigation', controllerAs: 'controller' }).when('/sign-up', { templateUrl : 'sign-up.html', controller : 'register', controllerAs: 'controller' }).otherwise('/'); $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }); wishingWell.controller('home', function($rootScope, $http, $location) { var jsonResponse; var jsonString; var self = this; self.user = {}; $http.get('user').then(function(response) { jsonString = JSON.stringify(response.data); jsonResponse = JSON.parse(jsonString); self.user.name = jsonResponse.principal[0].username; console.log(self.user.name); }); self.logout = function() { $http.post('logout',{}).finally(function() { $rootScope.authenticated = false; $location.path("/"); }); } });Let me know if there are any other controllers you need to see to be able to know why this doesn't work. The REST controller within Spring works for the login controller and is very simple so I didn't include it. The home.html is injected but not relevant here, as I am putting the name in the last "li" element in "nav", and have declared the controller in the nav section. The logout function works as well, so any ideas are much appreciated.
最满意答案
对于任何偶然发现这种情况的人，我发现因为我的<nav>元素在ng-view ，这个控制器在加载页面时只被实例化一次，这就是为什么它在登录后不会更新的原因将get()放入函数中解决了这个问题。
For anyone who stumbles across this in the future, I figured out that because my <nav> elements were outside of the ng-view, this controller was getting instantiated only once upon loading the page, which is why it wouldn't update after logging in. Putting the get() into a function solved this.
更多推荐
发布评论