Отправка формы AngularJS

Question

У меня есть форма для сбора регистрационных данных от пользователя, определенная так:

<form class="m-t-xl" ng-submit="signup(user)" novalidate>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name" required="" ng-model="user.name">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email" required="" ng-model="user.email">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Company" required="" ng-model="user.company">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password">
            </div>
            <div class="form-group">
                <div class="checkbox i-checks"><label> <input type="checkbox"><i></i> Agree the terms and policy </label></div>
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">Register</button>

            <p class="text-muted text-center"><small>Already have an account?</small></p>
            <a ui-sref="login" class="btn btn-sm btn-white btn-block">Login</a>
</form>

Почему-то, когда я нажимаю кнопку отправки, ничего не происходит. Кнопка просто мертва. Мой контроллер имеет следующий код:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
                            function($state, $scope, Registration) {

    $scope.user = {
        name: '',
        email: '',
        company: '',
        password: ''
    };
    console.log('controller getting loaded');
    $scope.signup = function(user) {
        console.log('register getting called');
    }
}]);

Он действует так, как будто форма не распознает метод регистрации. Аналогичным образом я реализовал форму входа с помощью:

<form class="m-t" ng-submit="login(credentials)" novalidate>
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email" required="" ng-model="credentials.email">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password" required="" ng-model="credentials.password">
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">Login</button>

            <a ui-sref="forgot_password"><small>Forgot password?</small></a>
            <p class="text-muted text-center"><small>Do not have an account?</small></p>
            <a class="btn btn-sm btn-white btn-block" ui-sref="register">Create an account</a>
</form>

а также:

.controller('loginCtrl', ['$scope', '$rootScope', '$state', 'Authentication', 'AUTH_EVENTS', 
                        function($scope, $rootScope, $state, Authentication, AUTH_EVENTS) {

    $scope.credentials = {
        email: '',
        password: ''
    };

    $scope.login = function(credentials) {
        Authentication.login(credentials).then(function(user) {
            $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
            $scope.setCurrentUser(user);
            $state.go('events');
        }, function () {
            $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
        });
    }
}]);

Вторая форма работает так, как задумано... Я в растерянности относительно того, что происходит. Я хотел бы сказать, что я зарегистрировал registerCtrl, и он загружается должным образом на страницу, однако метод ничего не делает при вызове.

Есть идеи, что еще может вызвать это? Я проверил все решения уже на SO, но ничего не помогло.

В моем config.js оба маршрута объявлены одинаково:

.state('login', {
            url: "/login",
            templateUrl: "views/login.html",
            data: { pageTitle: 'Login', specialClass: 'gray-bg' }
        })
        .state('register', {
            url: "/register",
            templateUrl: "views/register.html",
            data: { pageTitle: 'Register', specialClass: 'gray-bg' }
        })

Я также попытался изменить свою форму, чтобы щелкнуть нг по кнопке "Регистрация", которая вызывает тот же метод, но это имело такое же поведение.

Спасибо!

Answer 1

В контроллере "registerCtrl" у вас смешаны $scope и $state:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
                        function($state, $scope, Registration) {}]);

Так должно быть:

.controller('registerCtrl', ['$scope', '$state', 'Registration', 
                        function($scope, $state, Registration) {}]);

Я думаю, проблема в том, что вы назначаете пользовательский объект и функцию входа в систему неправильному объекту приложения.