Блог

Главная - Вопросы по программированию - Я не могу получить доступ к ng-model с контроллера [AngularJS]

Я не могу получить доступ к ng-model с контроллера [AngularJS]

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

Я разрабатываю сайт электронной коммерции для целей обучения.

HTML:

  <div class="container">
    <form class="log-in-form" ng-controller="ControllerLogin">
        <div class="form-group">
            <label for="loginEmail">Email address</label>
            <input type="email" class="form-control" id="loginEmail" placeholder="Email" ng-model="email">
        </div>
        <div class="form-group">
            <label for="loginPass">Password</label>
            <input type="password" class="form-control" id="loginPass" placeholder="Password" ng-model="password">
        </div>
        <button class="btn btn-default" ng-click="authenticate()">Login</button>
    </form>
</div>

Угловой javascript

     app.controller('ControllerLogin', ['$scope', '$http', 'ServiceLogin', function ($scope, $http, ServiceLogin) {
        $scope.authenticate = function () {
            console.log($scope.email);
            ServiceLogin.auth($scope.email, $scope.password)
                        .success(function (data) {
                            alert(data);
                        });
        }
}]);

Каждый раз, когда я запускаю консоль.введите $scope.email или пароль. Выдает ошибку undefined. Я только начинаю с angular, и я не знаю, почему не получает модели, я думаю, что мой код правильный. Я буду благодарен за любую помощь, которую вы можете оказать.

Комментарии:

1. хм .. кажется, он не устанавливается сам, пока это не будет действительное электронное письмо. Если вы измените входные данные на text , это сработает или если вы введете реальное электронное письмо. Я попытался поместить novalidate в форму, но это ничего не дало.

2.Насколько я знаю, $scope.email и и $scope.password не определены до тех пор, пока поля формы не установят эти значения. Похоже, что при загрузке контроллера страницы оба $scope.email и $scope.password не инициализируются и, следовательно, не определены. Вы можете инициализировать их пустыми строками. ( $scope.email =''"; $scope.password ="" )

3. Ооо, спасибо! Это была ошибка с электронной почтой. Я думаю, что я должен проверить это с помощью регулярного выражения, поскольку кнопка не имеет type=submit attr. Большое вам спасибо!

Ответ №1:

С сайта Angular:

Обратите внимание, что novalidate используется для отключения проверки собственной формы браузера.

Значение ngModel не будет установлено, пока оно не пройдет проверку для поля ввода. Например: входные данные типа email должны иметь значение в виде user@domain.

Ссылка:https://docs.angularjs.org/guide/forms

Таким образом, причина, по которой оно может быть пустым, заключается в том, что это недействительное электронное письмо.

Вы можете посмотреть на их демонстрационную версию для типа электронной почты и увидеть ее в действии.

Я рекомендую добавить:

 {{email}}
<br>
{{password}}

где-нибудь в вашем html в области HTML контроллера для вашей собственной отладки.

Удачи.