角度ng-grid问题

Question

我正在尝试使用下面的教程来使用ng-grid。

http://angular-ui.github.io/ng-grid/

这是我的观点

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/angular-resource.js")"></script>
@*<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>*@
<script type="text/javascript" src="@Url.Content("~/Scripts/ng-grid-2.0.7.min.js")"></script>
<script src="~/Scripts/PostsController.js"></script>
<script src="~/Scripts/postreq.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/ng-grid.min.css" />
<div data-ng-controller="PostsController">
    <div class="gridStyle" data-ng-grid="gridOptions"></div>
</div>

这是我的Angular代码

function PostsController($scope, $http) {
    $http({ method: 'GET', url: '/api/request' }).
        success(function (data, status, headers, config) {
            $scope.posts = data;       

        }).
        error(function (data, status, headers, config) {
            $scope.error = "An Error has occured while loading posts!";
            $scope.loading = false;
        });

    $scope.gridOptions = { data: 'posts' };
}

但是，当我运行应用程序时，我在浏览器中看到空白方块，并且在控制台中没有显示错误。请帮助我解决此问题。

仅供参考:我直接在浏览器中检查了API响应，它显示了数据。

Answer 1

在我看来，你遗漏了你正在学习的教程中的一些步骤：

在声明应用程序模块的位置添加ngGrid：angular.module('myApp',['ngGrid']);

我在任何地方都没有看到你的模块声明。

Answer 2

您是否在页面顶部定义了ng-app="myApp“？

我还注意到你没有为"gridStyle“定义css类。"gridStyle“不是ng-grid css的一部分。

Answer 3

听起来很奇怪，但这对我来说是有效的，因为它使用了超时。像这样试一下：

setTimeout(function () {
    $http.get('/api/request')
        .success(function (data, status) {
            $scope.posts = data;
        })
        .error(function (data, status) {
            alert(status);
        });
}, 100);