我第一次尝试使用带有 AngularJS 的 ui-grid。我最初是在做一个关于 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 中创建了我的代码，它可以在模拟器上运行，但不能通过我在 aspx 页面上的 Visual Studio 2013（它通过 html 页面运行）：-