服務中的AngularJS函數在路由更改後拋出'不是函數錯誤'？

我遇到了一個AngularJS問題，其中一個來自我的服務（authService.isLoggedIn（））的函數在我的控制檯中拋出'not a function'異常。但它只發生在路由更改後（如登錄後），所以在發生路由更改之前，函數已成功從我的$ routeChangeStart事件處理程序中調用，但在發生路由更改後，我收到了此異常console：服務中的AngularJS函數在路由更改後拋出'不是函數錯誤'？

TypeError: authService.isLoggedIn is not a function 
    at app.config.js:13

如果我需要發佈我的服務器端代碼（NodeJS + Express API路由），請告訴我。

這裏是我的index.html

<!DOCTYPE html> 

<html ng-app="myApp"> 
<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="stylesheet.css" rel="stylesheet"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script> 
    <base href="/"> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script> 
    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script> 

</head> 
<body> 

    <div ng-controller="navCtrl"> 

     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#">TriviaAttack!</a> 
       </div> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a ng-click="showLogin()">Login</a></li> 
         <li><a ng-click="showRegister()">Register</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <div ng-view></div> 

    </div> 

    <script src="./js/ui-bootstrap-custom-tpls-0.14.0.min.js"></script> 

    <script src="./app/app.js"></script> 
    <script src="./app/app.routes.js"></script> 
    <script src="./app/app.config.js"></script> 
    <script src="./app/services/authInterceptor.js"></script> 
    <script src="./app/services/auth.js"></script> 
    <script src="./app/services/authToken.js"></script> 
    <script src="./app/services/user.js"></script> 
    <script src="./app/controllers/nav.js"></script> 
    <script src="./app/controllers/home.js"></script> 
    <script src="./app/controllers/login.js"></script> 
    <script src="./app/controllers/landingpage.js"></script> 

</body> 
</html>

app.js

var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap']); 
console.log('myApp loaded');

app.routes.js

angular.module('myApp') 
.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: './app/views/landingpage.html', 
     controller: 'landingpageCtrl' 
    }) 
    .when('/home', { 
     templateUrl: './app/views/home.html', 
     controller: 'homeCtrl' 
    }); 
}); 
console.log('app.route loaded');

app.config.js

angular.module('myApp') 
.config(function($locationProvider, $httpProvider) { 

    //Removes # from urls. 
    $locationProvider.html5Mode(true); 

    //Add authentication interceptor to $httpProvider.interceptors array. 
    $httpProvider.interceptors.push('authInterceptor'); 
}) 
.run(function($rootScope, authService, $location) { 
    $rootScope.$on('$routeChangeStart', function(event) { 

     authService.isLoggedIn() 
     .then(function(response) { 
      console.log(response); 
      if (response.status == 200) { 
       $rootScope.user = response.data; 
      } else { 
       console.log('User not authenticated/logged in.'); 
      } 
     }); 

    }); 
});

個

服務/ authInterceptor.js

angular.module('myApp'). 
service('authInterceptor', function($location, authToken) { 
    var service = this; 

    service.request = function(config) { 
     config.headers.authorization = authToken.getToken(); 
     return config; 
    } 


    service.responseError = function(response) { 
     $location.path('/'); 
     return response; 
    } 

});

服務/ auth.js

angular.module('myApp') 
.service('authService', function($http) { 
    var service = this; 

    service.login = function(user, pass) { 
     return $http.post('/api/login', {username: user, password: pass}); 
    } 

    service.isLoggedIn = function() { 
     return $http.get('/api/user'); 
    } 

});

控制器/ login.js

angular.module('myApp') 
.controller('loginCtrl', function($scope, $modalInstance, $location, authService, authToken) { 
    $scope.msg = ''; 
    $scope.loginData = { 
     username: '', 
     password: '' 
    } 
    $scope.login = function() { 
     authService.login($scope.loginData.username, $scope.loginData.password) 
     .then(function(response) { 
      if (response.data.success) { 
       authToken.setToken(response.data.token); 
       authService.isLoggedIn = true; 
       $modalInstance.close(); 
       $location.path('/home'); 
      } else { 
       $scope.msg = response.data.message; 
       console.log('error logging in'); 
      } 
     }); 
     $scope.loginData = {}; 
    }; 

});

來源

2015-10-15 David Stampher

在你的控制器/ login.js

你正在設定

authServer.isLoggedIn to true

這使它成爲一個「布爾」權利？

來源

2015-10-15 09:34:10

非常感謝，只是我忽略了一些東西。你發現超級快，我真的很感激它！我正在重構一下，那是什麼導致了這個問題。我將它標記爲答案，因爲它解決了我的問題:) –

很高興，我可以幫忙。是的，謝謝。 –

服務中的AngularJS函數在路由更改後拋出'不是函數錯誤'？

回答

相關問題