2016-12-06 4 views
0

Я использую nodejs для бэкэнд и угловых для fronend (и используя материализацию для css) и пытаюсь написать код для регистрации. Когда я удаляю ng-модель, я не получаю никаких ошибок, однако, когда я включаю ng-модель во вход, в тот момент, когда я начинаю вводить пароль в поле password/email, я получаю странную угловую ошибку: TypeError: n.is не является function или TypeError: n.trigger не является функцией. Я понятия не имею, что -n- есть и не имеет n функции в любом месте. Были поиск в Интернете и т. Д., Но не могу понять, что неправильно. Также регистрация не работает (это было раньше). У кого-то есть идея? Спасибо!Угловая ошибка «n.is не является функцией» при включении ng-модели в поле ввода регистрации -why?

Браузер/JS/signup.html

<div class="signup-wrapper"> 
    <form id="signup-form" name="signupForm" ng-submit="signupForm.$valid && sendSignup(signup)"> 
     <alert type="danger" ng-show="error"> {{ error }} </alert> 
     <div class="form-group"> 
     <label for="email" >Email address</label> 
     <input style="width:300px;" type="text" ng-model="signup.email" class="form-control" id="email" placeholder="Enter email"> 
     </div> 
     <div class="form-group"> 
     <label for="signup-password">Password</label> 
     <input style="width:300px;" type="password" ng-model="signup.password" class="form-control" id="signup-password" placeholder="Password"> 
     <input type="password" ng-model="signup.confirm" placeholder="Confirm Password"> 
     </div> 
     <div class="signup-btn-group"> 
     <button type="submit" class="btn btn-default">Sign Up</button> 
     </div> 
    </form> 
</div> 

Браузер/JS/signup.js:

app.config (функция ($ stateProvider) {

$stateProvider.state('signup', { 
    url: '/signup', 
    templateUrl: 'js/signup/signup.html', 
    controller: 'SignupController' 
}); 

});

app.controller('SignupController', function ($scope, AuthFactory, $state) { 
    $scope.signup = {}; 

    $scope.sendSignup = function (signupInfo) { 
     AuthFactory.signup(signupInfo) 
     .then(function (response) { 
      if (response === 'email exists already') { 
       Materialize.toast('User already exists', 2000); 
      } 
      else if (response === 'not a valid email'){ 
       Materialize.toast('It is not a valid email', 2000); 
      } 
      else if (response === 'passwords do not match'){ 
       Materialize.toast('Your passwords do not match. Please try again!', 2000); 
      } 
      else { 
       Materialize.toast('Go ahead and login', 4000); 
       $state.go('login'); 
      } 
     }) 
    } 

}); 

сервер/приложение/настроить/аутентификации/local.js:

app.post('/signup', function(req, res, next) { 

var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
var test = re.test(req.body.email); 
if (req.body.password !== req.body.confirm) { 
    res.send('passwords do not match') 
} else if (!test) { 
    res.send('not a valid email') 
} else { 
    User.findOne({ 
     where: { 
      email: req.body.email 
     } 
    }).then(function(userOrNull) { 
     if (userOrNull) { 
      res.send('email exists already') 
     } else { 
      User.create(req.body) 
       .then(function(user) { 
        req.login(user, function(err) { 
         if (err) console.log(err); 
         res.redirect('/login'); 
        }) 
       }) 
     } 

    }) 
    } 
}); 

EDIT:

<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.css" /> 
<link rel="stylesheet" href="/materialize-css/bin/materialize.css"> 
<link rel="stylesheet" type="text/css" href="/style.css" /> 
<script src="/lodash/index.js"></script> 
<script src="/angular/angular.js"></script> 
<script src="/angular-animate/angular-animate.js"></script> 
<script src="/angular-ui-router/release/angular-ui-router.js"></script> 
<script src="/angular-ui-bootstrap/ui-bootstrap.js"></script> 
<script src="/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script> 
<script src="/socket.io-client/socket.io.js"></script> 
<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script> 
    <script type="text/javascript" src="/materialize-css/bin/materialize.js"></script> 
    <script type="text/javascript" src="/angular-materialize/src/angular-materialize.min.js"></script> 
<script src="/main.js"></script> 
+0

Скопируйте/вставьте полное сообщение об ошибке, оно, вероятно, включает в себя трассировку стека с именами файлов и номерами строк. Кроме того, если он в угловом, это, вероятно, включает ссылку на очень полезную страницу на угловом веб-сайте, которая расскажет вам гораздо больше об ошибке. – Duncan

+0

angular.js: 14110 TypeError: n.trigger не является функцией at angular-materialize.min.js: 1 на угловых.js: 19861 at completeOutstandingRequest (angular.js: 6035) at angular.js: 6314 – web2016

+0

Спасибо. Я не мог видеть ссылку – web2016

ответ

0

Ваш чек, чтобы увидеть, если форма $ действительным должно происходить в вашем .js. Таким образом, успех, $ scope.signupForm. $ Valid = true; и у вас просто будет вызов метода sendSignup.

Также ваша форма для регистрации ищет некоторый $ scope.signup.confirm = true. Именно поэтому он не может работать (я не вижу, чтобы вы на самом деле использовали это).

Надеюсь, это поможет! Дайте мне знать, если вам нужна дополнительная помощь.

+0

спасибо. Я удалил проверку формы только для того, чтобы увидеть, будет ли сообщение об ошибке продолжаться, и это делает невозможным проблему. Также я не понимаю, что вы имеете в виду под signup.confirm. Мне нужно, чтобы сравнить там пароли, и если Я удаляю его, я просто получаю сообщение об ошибке, что пароли не совпадают. – web2016

0

Вы добавили еще сообщения об ошибке в комментарии:

angular.js:14110 TypeError: n.trigger is not a function 
at angular-materialize.min.js:1 
at angular.js:19861 
at completeOutstandingRequest (angular.js:6035) 
at angular.js:6314 

Таким образом, хотя вы не упоминаете в вопросе, вы используете angular-materialize модуль и в том, что модуль, который бросает ошибка. Глядя на несжатые источники для углового материализации, я вижу, что он ожидает найти метод trigger для элементов DOM.

Файл Readme для этого модуля говорит:

Angular looks for jQuery and if no exists, it uses jQlite. Some directives of angular-materialize uses some jQuery methods, so be sure that Angular uses it instead of jQlite.

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

+0

Спасибо за ваш ответ. Я отредактировал мой вопрос и включил теги сценария. Я npm установлен jquery и имеет тег скрипта jquery (добавлен он до того, как материализуется, как это описано в документации по материализации), что-то не так с моими тегами скрипта или заказом? Спасибо! – web2016

1

Вам просто нужно загрузить свой jQuery еще до загрузки углового.

Это гарантирует, что Angular может использовать полную библиотеку jQuery вместо jQlite.