0

次のチュートリアルを使用して 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 の応答をブラウザーで直接確認したところ、データが表示されました。

4

3 に答える 3

0

ページの上部に ng-app="myApp" が定義されていますか?

また、「gridStyle」用に定義された css クラスがないことにも気付きました。「gridStyle」は ng-grid css の一部ではありません。

于 2013-11-12T21:13:06.963 に答える
0

奇妙に聞こえますが、これはタイムアウトを使用することでうまくいきました。次のようにしてみてください。

setTimeout(function () {
    $http.get('/api/request')
        .success(function (data, status) {
            $scope.posts = data;
        })
        .error(function (data, status) {
            alert(status);
        });
}, 100);
于 2013-11-13T09:04:15.627 に答える