Angular JS 로그인 폼 로그인 메서드가 호출되지 않았습니다.

저는 아래 동작을 관찰하고 관찰하고 있으며이 문제의 근본 원인을 이해할 수 없습니다.Angular JS 로그인 폼 로그인 메서드가 호출되지 않았습니다.

app.js는 : 경로와

angular.module('rolb', ['ngRoute']).config(function($routeProvider, $httpProvider) { 

    $routeProvider.when('/', { 
     templateUrl : 'home.html', 
     controller : 'homeController', 
     controllerAs: 'homeController' 
    }).when('/login', { 
     templateUrl : 'login.html', 
     controller : 'navigationController', 
     controllerAs: 'navigationController' 
    }).when('/subscribeConfirm', { 
     templateUrl : 'subscribe.html', 
     controller : 'subscriptionController', 
     controllerAs: 'subscriptionController' 
    }).otherwise('/'); 

    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 
    $httpProvider.defaults.headers.post = {}; 
    $httpProvider.defaults.headers.put = {}; 
    $httpProvider.defaults.headers.patch = {}; 
    /*if this is not set , after successfull authentication for first time , the next request doesn't contain JSESSIONID and hence session is not established 
    requiring again /login request*/ 
    $httpProvider.defaults.withCredentials = true; 

})

간단한 모듈은

Login.html 정의 :

<form role="form" ng-submit="navigationController.login()"> 
    <div class="form-group"> 
     <label for="username">Username:</label> <input type="text" 
      class="form-control" id="username" name="username" ng-model="navigationController.credentials.username"/> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password:</label> <input type="password" 
      class="form-control" id="password" name="password" ng-model="navigationController.credentials.password"/> 
    </div> 
    <button type="submit" class="btn btn-primary">Submit</button> 
</form>

index.html을 :

<body ng-app="rolb" ng-cloak class="ng-cloak"> 
    <div class="container"> 
     <ul> 
      <li><a href="#/">home</a></li> 
      <li><a href="#/login">login</a></li> 
      <li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li> 
     </ul> 
    </div> 
    <div ng-view class="container"></div> 
    <script src="js/angular-bootstrap.js" type="text/javascript"></script> 
    <script src="js/app.js"></script> 
    <script src="js/homeController.js"></script>  
</body> 
</html>

문제는 다음과 같습니다

1) 내가 로그인 방법이있는 navigationController에서 호출됩니다 ng-submit="navigationController.login()를 지정합니다.

2) 그러나 ng-submit="login()"을 지정하면 로그인 메소드가 호출되지 않습니다.

조회 :

1) 이미 app.js에 경로를 정의했기 때문에 내가 왜 login 메서드 호출하기 전에 navigationController를 지정해야하고, login.html가 NavigationController에 연결해야한다고?

2)이 같은 index.html 당 app.js 브라우저에서 성공적으로로드지고 있음을 확인했습니다

편집 1 : 답은 아래 Alongwith, 나는 또한 아래와 같이 $ 범위를 추가 할 수있는 navigationController에서 함수 정의를 수정 :

NavigationController.js

$scope.login = function() { 

     $http.post('http://localhost:8080/springbootrest/login', "username=" + encodeURIComponent(credentials.username) + 
      "&password=" + encodeURIComponent(credentials.password), { 
      headers : { 
      "content-type" : "application/x-www-form-urlencoded" 
      } 
     }).success(function(data) { 
      authenticate(function() { 
       if ($rootScope.authenticated) { 
        $location.path("/"); 
        $scope.loginError = false; 
       } else { 
        $location.path("/login"); 
        $scope.loginError = true; 
       } 
       }); 
      }).error(function(data) { 
       $location.path("/login"); 
       $scope.loginError = true; 
       $rootScope.authenticated = false; 
      }) 
};

출처

2017-12-23 Atul

경로 구성에 controllerAs을 정의했기 때문에 템플릿에서 해당 제어기를 구문으로 정의해야합니다. 그렇지 않으면 구성에서 제거하십시오.

$routeProvider.when('/', { 
     templateUrl : 'home.html', 
     controller : 'homeController', 
//remove controllerAs: 'homeController' 
}).when('/login', { 
     templateUrl : 'login.html', 
     controller : 'navigationController', 
//remove controllerAs: 'navigationController' 
    }).when('/subscribeConfirm', { 
     templateUrl : 'subscribe.html', 
     controller : 'subscriptionController', 
//remove controllerAs: 'subscriptionController' 
}).otherwise('/');

출처

2017-12-23 03:50:15 Sajeetharan

감사합니다. 위의 수정 외에도 NavigationController를 수정하여 함수 정의 전에 $ scope를 추가했습니다. – Atul

Angular JS 로그인 폼 로그인 메서드가 호출되지 않았습니다.

답변

관련 문제