当将ng-n.is包含到注册-why的输入字段中时出现角度错误“模型不是函数”？

Question

我使用nodejs作为后端，使用angular作为前端(使用materialize作为css)，并尝试为注册编写代码。当我删除ng-model时，我没有得到错误，但是，当我在输入中包含ng-model时，当我开始在密码/电子邮件字段中输入时，我得到了一个奇怪的角度错误: TypeError: n.is不是一个函数或者TypeError: n.trigger不是一个函数。我不知道-n-是什么，并且在任何地方都没有n函数。我一直在互联网上搜索等，但不能弄清楚什么是wrong.Also，注册不工作(它以前做了)。有谁有主意吗？谢谢!

浏览器/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 ($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 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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');
                    })
                })
        }

    })
  }
});

编辑：

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

Answer 1

你只需要在加载Angular之前加载你的jQuery。

这确保了Angular可以使用完整的jQuery库而不是jQlite。

Answer 2

slick.min.js和angular-slick.min.js也有同样的问题，在花了很多时间寻找解决方案后，我终于发现这个问题很简单，我的常识不起作用。

我按照下面的顺序添加了js文件，错误消失了。希望有人觉得它有用：

1) jquery.min.js
2) jquery-ui.min.js
3) slick.min.js
4) angular.js
5) angular-filter.js
6) angular-slick.min.js
...
...

在您的情况下，可以尝试以下顺序，看看它是否有效

<script src="/jquery/dist/jquery.min.js"></script>
<script src="/materialize-css/bin/materialize.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-materialize/src/angular-materialize.min.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/lodash/index.js"></script>
<script src="/socket.io-client/socket.io.js"></script>
<script src="/main.js"></script>

Answer 3

查看表单是否为$valid的检查应该在.js文件中进行。因此，如果成功，$scope.signupForm.$valid = true；您就可以调用sendSignup方法了。

此外，您的注册表单正在寻找一些$scope.signup.confirm =true。这就是它不能工作的原因(我没有看到你真的在使用它)。

希望这能有所帮助！如果你需要更多的帮助，请告诉我。