2013-11-12 4 views
0

Я пытаюсь использовать ng-сетку, используя следующий учебник.Проблема с угловой ng-сеткой

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' }; 
} 

Однако, когда я запустить приложение я вижу пустой квадрат в браузере, и нет никаких ошибок, показывая в консоль. Пожалуйста, помогите мне исправить эту проблему.

FYI: Я проверил ответ API непосредственно в браузере, и он показывает данные.

ответ

0

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

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

+0

В моей Layout.cshtml я не имею данных-нг-приложение , но до сих пор никакого успеха. Квадратный кронштейн поставляется с пустым содержимым. Вот мой css .gridStyle { border: 1px solid rgb (212,212,212); ширина: 400 пикселей; высота: 300px; } и здесь ссылка <ссылка отн = "Таблица стилей" Тип = "текст/CSS" HREF = "~/Content/site.css" /> – immirza

0

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

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

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

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

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

+0

Является ли обязательным для достижения функциональности ngGrid используя угловые модули? Я не использую Angular Modules и просто пытаюсь использовать его, используя простые угловые функции, как я показал в своем коде. – immirza

+0

«Большинство приложений имеют основной метод, который создает экземпляры, проводы и загружает приложение. Угловые приложения не имеют основного метода. Вместо этого модули декларативно определяют, как приложение должно быть загружено». - http://docs.angularjs.org/guide/module – Drahakar

+0

Doh! Я идиот. благодаря –

Смежные вопросы