[英]Angular Route Controller Infinite Loop
首先，我只是angularJS的初學者。 我有這些文件
App.js
'use strict'; var app = angular.module('testApp', [ 'ngRoute', 'ngCookies' ]) app.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/login', { controller: 'LoginController', templateUrl: '../app/login/login.html', hideMenus: true }) .when('/main', { templateUrl: '../app/main/main.html', controller: 'MainController' }) .when('/sales', { controller: 'SalesController', templateUrl: '../sales/sales.html', hideMenus: true }) .otherwise({ redirectTo: '/login' }); } ]) .run(['$rootScope', '$location', '$cookieStore', '$http', function($rootScope, $location, $cookieStore, $http) { // keep user logged in after page refresh var checkStorage; if ($cookieStore.get('testToken') != null) { checkStorage = $cookieStore.get('testToken'); } else if (sessionStorage.testToken!= null) { checkStorage = $.parseJSON(sessionStorage.testToken); } $rootScope.globals = checkStorage || {} $rootScope.$on('$locationChangeStart', function(event, next, current) { // redirect to login page if not logged in if ($location.path() !== '/login' && !$rootScope.globals.username) { $location.path('/login'); } else if ($location.path() == '/login' && $rootScope.globals.username) { $location.path('/main'); } }); } ]);
的index.html
<!DOCTYPE html> <meta name="viewport" content="width=device-width, user-scalable=no"> <html ng-app="testApp"> <head> <meta charset="utf-8" /> <title>testApp</title> <link rel="stylesheet" href="content/bootstrap.min.css" /> <link rel="stylesheet" href="content/main.css" /> </head> <body> <div ng-view style="height:100%"></div> <script src="scripts/jquery-2.1.3.min.js"></script> <script src="scripts/bootstrap.min.js"></script> <script src="scripts/angular.js"></script> <script src="scripts/angular-route.js"></script> <script src="scripts/angular-cookies.js"></script> <script src="app/app.js"></script> <script src="app/login/login.controller.js"></script> <script src="app/login/login.service.js"></script> <script src="app/main/main.controller.js"></script> </body> </html>
的login.html
<div class="login-form"> <div ng-show="error" class="alert alert-danger login-error">{{error}}</div> <div class="login-box"> <!--ui-keypress="{13:'login()'} && form.$valid"--> <form name="form" ng-submit="login()" role="form" class="form-signin"> <div class="form-group"> <div class="center logo"></div> <input type="text" name="username" id="username" class="form-control login-text" ng-model="username" placeholder="Username" required /> <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span> <input type="password" name="password" id="password" class="form-control login-text" ng-model="password" placeholder="Password" required /> <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span> <div style="padding-left:5px;padding-top:2px;"><input id="chkRemember" type="checkbox" ng-model="remember" /> Remember Me</div> </div> <div class=""> <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn">Login</button> </div> </form> </div> </div>
login.controller.js
'use strict'; angular.module('testApp') .controller('LoginController', ['$scope', '$rootScope', '$location', 'AuthenticationService', function($scope, $rootScope, $location, AuthenticationService) { // reset login status AuthenticationService.ClearCredentials(); $scope.login = function() { $scope.dataLoading = true; var rem = 0; if ($scope.remember) { var rem = 1 } AuthenticationService.Login($scope.username, $scope.password, rem, function(response) { if (response.success) { AuthenticationService.SetCredentials($scope.username, response.token, rem); $location.path('/main'); } else { $scope.error = response.message; $scope.dataLoading = false; } }); }; } ]);
login.service.js
'use strict'; angular.module('testApp') .factory('AuthenticationService', ['Base64', '$http', '$cookieStore', '$rootScope', '$timeout', function(Base64, $http, $cookieStore, $rootScope, $timeout) { var service = {}; service.Login = function(username, password, remember, callback) { $http.post('api/test/log', { username: username, password: Base64.encode(password), remember: remember }) .success(function(response) { callback(response); }); }; service.SetCredentials = function(username, token, rem) { $rootScope.globals = { username: username, token: token }; if (rem == 1) { $cookieStore.put('testToken', $rootScope.globals); } else { sessionStorage.setItem("testToken", JSON.stringify($rootScope.globals)); } }; service.ClearCredentials = function() { $rootScope.globals = {}; $cookieStore.remove('testToken'); }; return service; } ]) .factory('Base64', function() { /* jshint ignore:start */ var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=AA'; return { encode: function(input) { var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; do { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4); chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return output; }, decode: function(input) { var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; // remove all characters that are not AZ, az, 0-9, +, /, or = var base64test = /[^A-Za-z0-9\\+\\/\\=]/g; if (base64test.exec(input)) { window.alert("There were invalid base64 characters in the input text.\\n" + "Valid base64 characters are AZ, az, 0-9, '+', '/',and '='\\n" + "Expect errors in decoding."); } input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, ""); do { enc1 = keyStr.indexOf(input.charAt(i++)); enc2 = keyStr.indexOf(input.charAt(i++)); enc3 = keyStr.indexOf(input.charAt(i++)); enc4 = keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return output; } }; /* jshint ignore:end */ });
main.controller.js
'use strict'; angular.module('testApp') .controller('MainController', ['$scope', '$cookieStore', '$http', function($scope, $cookieStore, $http) { var session; console.log('LOOPING CONTROLLER'); if ($cookieStore.get('testToken') != null) { session = $cookieStore.get('testToken'); } else { session = $.parseJSON(sessionStorage.testToken); } $scope.remove = function() { $cookieStore.remove('testToken'); sessionStorage.removeItem("testToken"); } } ]);
根據給定的文件，index.html正確顯示login.html且沒有錯誤。 但是，在登錄並執行login.controller.js中的$ location.path時，路由啟動並運行main.controller.js，只是在我的瀏覽器上的頁面檢查器中看到了console.log（'LOOPING CONTROLLER'）並沒有在模板中加載main.html。
我有想念嗎？ 謝謝您的幫助
UPDATE
我似乎與jQuery有沖突。 刪除jquery可使頁面正常運行（解析除外）。 關於導致沖突的原因有什么想法？
我想問題是$location.path('/main'); 調用$locationChangeStart處理程序。 鑒於此處理程序是在位置更改之前執行的，因此它看起來將無限執行。
Node + express + Angular-調用路由導致控制器的無限循環調用
[英]Node+express+Angular- calling route results in infinite loop call of controller
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.