Угловая проблема с ng-сеткой

Я пытаюсь использовать 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>

Вот мой угловой код

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 прямо в браузере, и он отображается с данными.


ng-grid
person immirza    schedule 12.11.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Мне кажется, что вам не хватает некоторых шагов учебника, которому вы следуете:

Там, где вы объявляете свой модуль приложения, добавьте ngGrid: angular.module('myApp',['ngGrid']);

Я нигде не вижу объявления вашего модуля.

person Drahakar    schedule 16.11.2013
comment
Обязательно ли для достижения функциональности ngGrid использовать модули Angular? Я не использую модули Angular и просто пытаюсь использовать их, используя простые функции Angular, как показано в моем коде. - person immirza; 16.11.2013
comment
У большинства приложений есть метод main, который создает, связывает и загружает приложение. У приложений Angular нет основного метода. Вместо этого модули декларативно определяют, как приложение должно загружаться. - docs.angularjs.org/guide/module - person Drahakar; 18.11.2013

arrow_upward
0
arrow_downward

У вас есть ng-app="myApp" в верхней части вашей страницы?

Я также заметил, что у вас нет класса css, определенного для «gridStyle». «gridStyle» не является частью css ng-grid.

person Rob    schedule 12.11.2013
comment
В моем Layout.cshtml у меня есть data-ng-app ‹html data-ng-app= lang=en›, но все равно безуспешно. Квадратная скобка поставляется с пустым содержимым. Вот мой css .gridStyle { border: 1px solid rgb(212,212,212); ширина: 400 пикселей; высота: 300 пикселей; } и вот ссылка ‹ссылка rel=stylesheet type=text/css href=~/Content/Site.css /› - person immirza; 15.11.2013

arrow_upward
0
arrow_downward

Звучит странно, но это сработало для меня с использованием тайм-аута. Попробуйте это так:

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