javascript - AngularJS 实现 ui-grid

Question

我第一次尝试将 ui-grid 与 AngularJS 一起使用。我最初是在做一个关于 ngGrid 的教程...但是当我查找引用文件时他们都说 ui-grid ......所以现在我有点困惑。

我在我的 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 <- $rootScope

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

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

Answer 1

您必须注入(inject) 'ui.grid' 而不是 'ngGrid' 并更改实现:

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

检查这个例子:http://plnkr.co/edit/Bq8AVBVb7UxwBeBNKoRO?p=preview