Question

我试图第一次使用带有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" />

我的Javascript让GridView工作如下： -

<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＆lt; - $ rootScope

修改： - 我在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

AngularJS实现ui-grid

1 个答案: