Question

我是angularjs的新手。我的cshtml文件是：

@{
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = null;
}


<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        .gridStyle {
            border: 1px solid #d4d4d4;
            /*width: 400px;
            height: 200px;*/
        }
    </style>
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
    <script type="text/javascript" src="~/Scripts/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body ng-controller="MyCtrl">
    <div class="container">
        <script type="text/javascript">
            var app = angular.module('myApp', ['ngGrid']);
            $(document).ready(function () {

                ///////////////////////////DISPLAY LIST/////////////////////////
                $('#DisplayListObj').click(function (e) {
                    $.ajax({
                        type: 'GET',
                        dataType: 'json',
                        contentType: 'application/json',
                        url: '@Url.Action("DisplayListObject", "Demo")',
                        success: function (Product) {
                            //var result = '<table>';
                            //for (var i = 0 ; i < Product.length ; i++) {
                            //    result += "<tr>" + "<td>" + Product[i].Id + "\t</td>" + "<td>" + Product[i].Name + "\t</td>" + "<td>" + Product[i].Company + "\t</td>" + "</tr>";
                            //}
                            //$('#IdresultListDisplay').html(result + '</table>');

                            app.controller('MyCtrl', function ($scope) {
                                $scope.Data = Product;
                                $scope.gridOptions = { data: 'Data' };
                            });
                        }
                    });
                });
                ///////////////////////////DISPLAY LIST/////////////////////////
                $('#Add').click(function (event) {


                    var ID = $('#ID').val();
                    var Name = $('#Name').val();
                    var Company = $('#Company').val();
                    $.ajax({
                        type: 'GET',
                        dataType: 'json',
                        data: { ID: ID, Name: Name, Company: Company },
                        contentType: 'application/json',
                        url: '@Url.Action("DisplayObject", "Demo")',
                        success: function (Product) {
                            var result = '<table>';
                            for (var i = 0 ; i < Product.length ; i++) {
                                result += "<tr>" + "<td>" + Product[i].Id + "\t</td>" + "<td>" + Product[i].Name + "\t</td>" + "<td>" + Product[i].Company + "\t</td>" + "</tr>";
                            }
                            $('#IdresultListDisplay').html(result + '</table>');

                        }
                    });
                });
            });

        </script>

        <h3 style="color:white">Display List using JSON @DateTime.Now</h3>
        <a href="#" class="btn btn-default btn-lg" id="DisplayListObj">Display List Object</a>
        <br />
        <br />
        @*<div id="IdresultListDisplay" style="color:white"></div>*@
        <div class="gridStyle" ng-grid="gridOptions"></div>
        <br />
        <br />
        <div id="AddNew">
            <input type="text" id="ID" value="4" name="ID" />
            <br />
            <input type="text" id="Name" value="Name" name="Name" />
            <br />
            <input type="text" id="Company" value="Company" name="Company" />
            <br />
            <a href="#" class="btn btn-default btn-lg" id="Add">Add New</a>
            <br />
        </div>
    </div>
</body>

</html>

我的控制器方法如下：

public class DemoController : Controller
    {
        // GET: Demo

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult HelloAjax()
        {
            return Content("Hello Ajax","text/plain");
        }
        public ActionResult Sum(int a , int b)
        {
            return Content((a+b).ToString(), "text/plain");
        }
        public ActionResult DisplayObject(string ID , string Name , string Company)
        {
            mydbEntities ProductEntity = new mydbEntities();
            Product P = new Product();
            P.Id = ID;
            P.Name = Name;
            P.Company = Company;
            ProductEntity.Products.Add(P);
            ProductEntity.SaveChanges();
            return Json(ProductEntity.Products.ToList(), JsonRequestBehavior.AllowGet);
        }
        public ActionResult DisplayListObject()
        {
            mydbEntities ProductEntity = new mydbEntities();
            return Json(ProductEntity.Products.ToList(), JsonRequestBehavior.AllowGet);
        }
    }

我在F12控制台窗口中收到此错误：

angular.min.js：6未捕捉错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.21/ $注射器/ modulerr P0 = MyApp来＆安培; P1 =错误％3A％...％20C％20（HTTP％3A％2F％2Flocalhost％3A5760％2FScripts％2Fangular.min.js％3A18 3A60％）

Answer 1

我认为你错过了ngGrid的脚本src。错误是一个链接，您可以单击它以查看您缺少的模块。

Answer 2

在主模块中，你注入了ngGrid模块的依赖关系。所以你需要包含具有ngGrid模块的js文件。在头部分包含以下文件

https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js

还包括样式的css文件

https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css

有关ngGrid模块的更多信息，请访问此链接

https://github.com/angular-ui/ui-grid

Answer 3

您使用了＆＃34; MyCtrl ＆＃34;在身体上，但你的＆＃34; MyCtrl ＆＃34;在＆＃34;＃ DisplayListObj ＆＃34;的点击功能中实现。元素，这就是问题。

定义您的＆＃34; MyCtrl＆＃34;外部点击功能

AngularJS错误：我的浏览器窗口中{$ injector：modulerr模块错误

3 个答案: