Angular error & ldquo; n.is is not a function & rdquo; when including ng-template in the entry field of the registration-why?

advertisements

I am using nodejs for the backend and angular for the fronend (and using materialize for css) and trying to write code for the signup. When I remove ng-model I get no errors, however, when I include ng-model in the input, the moment I start typing in the password/email field, I get a weird angular error : TypeError: n.is is not a function or TypeError: n.trigger is not a function . I have no idea what -n- is and dont have n function anywhere. Have been searching the internet etc. but cant figure out whats wrong.Also, signup does not work (it did before). Anyone has an idea? Thank you!

browser/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>

browser/js/signup.js:

app.config(function ($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');
            }
        })
    }

});

server/app/configure/authentication/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>


You simply need to load your jQuery even before you load Angular.

This ensures that Angular can use the full jQuery library instead of jQlite.