Question

我目前正在使用Sql Database处理Angular Js。我正在尝试使用Sql Database创建Angular Js的用户注册系统但是当我点击提交按钮时出现以下错误......

angular.js:14642 TypeError: $ is not a function
    at b.$scope.SaveUser (Module.js:6)
    at fn (eval at compile (angular.js:15500), <anonymous>:4:144)
    at e (angular.js:27285)
    at b.$eval (angular.js:18372)
    at b.$apply (angular.js:18472)
    at HTMLInputElement.<anonymous> (angular.js:27290)
    at kg (angular.js:3771)
    at HTMLInputElement.d (angular.js:3759

这是寄存器控制器中的代码......

 public class RegisterController : Controller
        {
            public ActionResult Register()
            {
                return View();
            }

            //To check that user entered is already present or not.  
            public bool CheckUser(string user)
            {
                bool Exists = false;
                using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
                {
                    var uName = context.UserLogins.Where(x => x.UserName == user).ToList();
                    if (uName.Count != 0)
                    {
                        Exists = true;
                    }
                }
                return Exists;
            }

            //For saving the user details in database table.          
            public string AddUser(UserLogin usr)
            {
                if (usr != null)
                {
                    if (CheckUser(usr.UserName) == false)
                    {
                        using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
                        {
                            UserLogin createUser = new UserLogin();
                            createUser.UserName = usr.UserName;
                            createUser.Firstname = usr.Firstname;
                            createUser.Lastname = usr.Lastname;
                            createUser.Email = usr.Email;
                            createUser.DateTimeCreated = DateTime.Now;
                            createUser.Password = Utility.Encryptpassword(usr.Password);
                            context.UserLogins.Add(createUser);
                            context.SaveChanges();
                        }
                        return "User created !";
                    }
                    else
                    {
                        return "User already present !";
                    }
                }
                else
                {
                    return "Invalid Data !";
                }
            }
        }
    }

这是我的Module.js代码..

var app = angular.module("myApp", [])
    .controller('Ctrl', ['$scope', function ($scope) {

        $scope.SaveUser = function () {
            $("#divLoading").show();
            var User = {
                FName: $scope.fName,
                LName: $scope.lName,
                Email: $scope.uEmail,
                Password: $scope.uPwd,
                UserName: $scope.uName
            };

            var response = myService.AddUser(User);
            response.then(function (data) {
                if (data.data == "1") {
                    $("#divLoading").hide();
                    clearFields();
                    alert("User Created !");
                    window.location.href = "/Register/Login";
                }
                else if (data.data == "-1") {
                    $("#divLoading").hide();
                    alert("user alraedy present !");
                }
                else {
                    $("#divLoading").hide();
                    clearFields();
                    alert("Invalid data entered !");
                }
            });
        }

        function clearFields() {
            $scope.fName = "";
            $scope.lName = "";
            $scope.Email = "";
            $scope.Password = "";
            $scope.UserName = "";
        }

    }])
    .service("myService", function ($http) {

        this.AddUser = function (User) {
            var response = $http({
                method: "post",
                url: "/Register/AddUser",
                data: JSON.stringify(User),
                dataType: "json"
            });
            return response;
        }
    })

这是我的HTML代码......

@{
    Layout = null;
}


<html ng-app="myApp">
<head>
    <title>Register</title>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <script src="~/Scripts/MyScript/Module.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />


</head>
<body>

    <div class="container" ng-controller="Ctrl">
        <br />

        <div class="row">
            @*<img src="~/Content/Images/user.png" />*@<h4>Register User</h4>
            <hr />

            <br />
            <div class="col-md-6">
                <form name="userForm" novalidate>
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
                                    First Name :
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" placeholder="First Name" name="fName" ng-model="fName" required autofocus />
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
                                    Last Name :
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" placeholder="Last Name" name="lName" ng-model="lName" required autofocus />
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3" style="margin-left: 15px; color: #5bc0de">
                                    Email :
                                </div>
                                <div class="col-md-6">
                                    <input type="email" class="form-control" placeholder="User's Email" name="uEmail" ng-model="uEmail" required autofocus />
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
                                    Username :
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" placeholder="Username" name="uName" ng-model="uName" required autofocus />
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
                                    Password :
                                </div>
                                <div class="col-md-6">
                                    <input type="password" class="form-control" placeholder="Password" name="uPwd" ng-model="uPwd" required autofocus />
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4"></div>
                                <div class="col-md-3">
                                    <input type="button" value="Save" ng-click="SaveUser();" class="btn btn-success" />
                                </div>
                                <div class="col-md-3">
                                    @Html.ActionLink("Sign in", "Login", "Register", new { @class = "btn btn-info" })
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
                                        <p style="position: absolute; top: 30%; left: 45%; color: White;">
                                            please wait...<img src="~/Content/images/load.png">
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

这是我运行应用程序时的屏幕截图什么是解决这个问题的最佳解决方案..谢谢

Answer 1

您需要在脚本路径中包含 jquery 。

这样的事情：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

请务必在Module.js之前添加。

另外，为了使该功能有效，您需要添加jquery-ui和bootstrap.js。

$不是b。$ scope.SaveUser中的函数

1 个答案: