AngularJS 实现 ui-grid

Question

我第一次尝试使用带有 AngularJS 的 ui-grid。我最初是在做一个关于 ngGrid 的教程......但是当我查看参考文件时，他们都说 ui-grid on 他们......所以现在我有点困惑。

我在我的 aspx 页面中引用了以下内容：-

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />    
<script src="Scripts/jquery-1.12.0.min.js"></script>
<script src="Scripts/ui-grid.min.js"></script>
<link href="Content/ui-grid.min.css" rel="stylesheet" />

让 GridView 工作的 Javascript 如下所示：-

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="secondaryContent">
<script type="text/javascript">    
        var app = angular.module('', ['ngGrid']);
        app.controller('UserController', function ($scope) {

            $scope.myData = [{ name: "xxxx", age: 50 },
                             { name: "yyyy", age: 43 },
                             { name: "zzzz", age: 27 },
                             { name: "eeee", age: 29 },
                             { name: "ffff", age: 34 }];

            $scope.gridOptions = {
                data: 'myData',
                showGroupPanel: true,
                jqueryUIDraggable: true
            };
        });

  </script>
</asp:Content>

最后我的 aspx 主体看起来像：-

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">


    <h1>My AngularJS Application</h1>

    <div class="row">
        <div style="margin-top: 40px"></div>
        <div data-ng-app="" data-ng-controller="UserController">
            <b>Employee List</b><br />
            <br />
            <div class="gridStyle" data-ng-grid="gridOptions"></div>

所有这些都到位后，我得到了一个具有以下样式的空网格，通过我的 div 类引用：-

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

我一定是错过了什么……不过不知道是什么。

当我在浏览器上检查控制台时，它给了我以下错误：- 未捕获的错误：未知提供者：$rootScopeProvider

编辑：- 我在 plunker 中创建了我的代码，它可以在模拟器上运行，但不能通过我在 aspx 页面上的 Visual Studio 2013（它通过 html 页面运行）：-

http://plnkr.co/edit/L3n5CETMtlTQagNm6axK?p=preview

Answer 1

您必须注入 'ui.grid' 而不是 'ngGrid' 并更改实现：

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

查看此示例：http://plnkr.co/edit/Bq8AVBVb7UxwBeBNKoRO?p=preview