AngularJS 이벤트 처리기가 실행되지 않습니다.

Question

사용자 정의 인증 서비스를 통해 ng-submit 이벤트를 통해 제출하려는 양식이 있습니다.

login.html (부분 템플릿)

<div class='container'> 
    <form class='form-signin' role='form' ng-submit='login()'> 
     <h2 class='form-signin-heading'>dotAdmin login</h2> 
     <input type='email' class='form-control' placeholder='Email Address' ng-model='email' required autofocus> 
     <input type='password' class='form-control' placeholder='Password' ng-model='password' required> 
     <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
    </form> 
</div> 

services.js

/* Services */ 
var dotAdminServices = angular.module('dotAdminServices', []); 

// don't know if loading http and rootscope dependencies are redundant 
dotAdminServices.factory('SessionService', [function() { 
    return { 
     isLogged: false, 
     userId: null, 
     name: null, 
     email: null, 
     password: null, 
     imageUrl: null, 
     coverUrl: null 
    }; 
}]); 

dotAdminServices.factory('AuthService',['$http', 'SessionService', '$location', 
function ($http, SessionService, $location) { 
    var login = function (email, pw) { 
     $http.post('http://54.187.31.161/api/v1/users/sign_in', {'email': email, 'password': pw}). 
      success(function (data) { 
        SessionService.isLogged = true, 
        SessionService.name = data.name, 
        SessionService.id = data.id, 
        SessionService.email = email, 
        SessionService.password = pw, 
        SessionService.coverUrl = data.coverUrl, 
        SessionService.imageUrl = data.imageUrl; 
        $location.url('/dashboard'); 
       } 
      ). 
      error(function(){ 
        SessionService.isLogged = false, 
        SessionService.name = null, 
        SessionService.id = null, 
        SessionService.email = null, 
        SessionService.password = null, 
        SessionService.coverUrl = null, 
        SessionService.imageUrl = null; 
       } 
      ); 
    }; 

    var logout = function() { 
     $http.delete('http://54.187.31.161/api/v1/users/sign_out', {'email': email, 'password': pw}). 
      success(function() { 
       SessionService.isLogged = false, 
       SessionService.name = null, 
       SessionService.id = null, 
       SessionService.email = null, 
       SessionService.password = null, 
       SessionService.coverUrl = null, 
       SessionService.imageUrl = null; 
      }); 
    }; 
}]); 

및

/* Controllers */ 
var dotAdminControllers = angular.module('dotAdminControllers', []); 

dotAdminControllers. 
controller('loginCtrl', ['SessionService', 'AuthService', '$location', '$http', '$scope', 
    function($scope, $http, $location, SessionService, AuthService){ 
     $scope.dummy = 'stringtest'; 
     $scope.login = function() { 
      alert('function executed'); 
     }; 
     } 
]); 

재미있는 일이있는 controller.js : 나는 장치를 실행할 때 테스트하여 범위 변수에 액세스하면 그들은 모두 정의되지 않은 것으로 나타납니다. 또한 $ scope에 dummy 변수를 정의하고 {{dummy}}를 login.html에 사용하여 테스트했지만 아직 바인딩되지 않고 페이지에 표시되지 않습니다. 또한 controller.js에 중단 점을 설정하면 모든 ServiceSession 변수가 로컬 범위에있는 것처럼 보입니다. 난 너무 혼란 스러워요. 인젝터가 로컬 범위로 축소되는 여러 변수 범위가 있습니까? 페이지로드시 정의되지 않았기 때문에 이벤트 핸들러가 실행되지 않는다는 것을 알지만 왜 이런 일이 발생합니까?

답장을 보내 주시거나 내 긴 게시물을 통해 터벅 터벅 걷는 것에 대해 미리 감사드립니다.

Answer 1

인라인 배열을 사용하는 종속성 삽입은 선언 된 순서대로 종속성을 전달합니다. 귀하의 경우 그래서, 함수 PARAMS는 다음과 같아야합니다

function(SessionService, AuthService, $location, $http, $scope) 

현재, 당신이 당신의 기능에 $scope를 호출하는 것, 그것이 첫 번째 종속되는 때문에, 사실 SessionService입니다.