javascript - $ 不是 b.$scope.SaveUser 的函数

Question

我目前正在使用 SQL 数据库开发 Angular Js。我正在尝试通过带有 Sql 数据库的 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

这是注册 Controller 中的代码...

 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。