2

Решил изучать AngularJS и потребовалось послать запрос на скрипт который возвращает JSON, далее из этого JSON генерируется список Li

JSON от сервера:

[{"id":"1","title":"\u0413\u043e\u0432\u044f\u0434\u0438\u043d\u0430","description":"","pos":"1","approved":"1"},{"id":"2","title":"\u041a\u0443\u0440\u0438\u0446\u0430","description":"","pos":"2","approved":"1"},{"id":"3","title":"\u0411\u0430\u0440\u0430\u043d\u0438\u043d\u0430","description":"","pos":"3","approved":"1"},{"id":"4","title":"\u041f\u043e\u043b\u0443\u0444\u0430\u0431\u0440\u0438\u043a\u0430\u0442\u044b","description":"","pos":"4","approved":"1"},{"id":"5","title":"\u041d\u0430\u043f\u0438\u0442\u043a\u0438","description":"","pos":"5","approved":"1"},{"id":"6","title":"\u041d\u0430\u043f\u0438\u0442\u043a\u0438","description":"","pos":"6","approved":"1"}]

Controller:

var CategoryController = angular.module('CategoryController',[]);

CategoryController.controller('MakeCategories', function($scope){

    $.get('http://api.site.com/categories',function(data){

        $scope.categories = data;

    });

});

Заранее оповещаю, что юзаю $.get, так как $http.get посылает OPTIONS, даже если я указываю метод GET при вызове метода $http(). И никак не послать запрос на свой поддомен.

Сам HTML код:

    <div class="col-2 clearfix" ng-app="CategoryController">

    <div class="panel-header clearfix">
        <div class="col-lg-3"><h1>Категории</h1></div>
        <div class="col-lg-9">
            <button id="add-cat-btn" onclick="Category.CreateItem();" class="add-cat-btn">Добавить категорию</button>
        </div>
    </div>

    <div class="panel-content" ng-controller="MakeCategories">

        <div class="panel-order-table cat-table">

            <div class="panel-cat-header">
                <span>НАИМЕНОВАНИЕ</span>
            </div>

            <ul class="panel-cat-list white-block">
              <li ng-repeat="cat in categories">
                <span id="drag-icon-block">
                    <span class="sprite-icon drag-icon"></span>
                </span>
                <span id="cat-item-label">{{cat.title}}</span>
                <div id="cat-item-btns">
                    <span onclick="Category.Edit({{cat.id}});" class="sprite-icon edit"></span>
                    <span class="sprite-icon delete"></span>
                </div>
              </li>
            </ul>

        </div>

    </div>

</div>

Но ничего не выводит. В чем может быть проблема? Я только начал переходить на JS фреймворки.

2
  • смотрите ошибки в консоли браузера
    – Grundy
    5 фев 2016 в 17:32
  • Там пусто. Я проверял
    – Abreak06
    5 фев 2016 в 18:36

1 ответ 1

1

Так как используется не встроенный механизм запросов, то ангуляр не знает что запрос выполнился и данные нужно синхронизировать с view.

Для этого можно использовать $scope.$apply, либо сервис $timeout.

Например так:

CategoryController.controller('MakeCategories', function($scope){

    $.get('http://api.site.com/categories',function(data){
        $scope.$apply(function(){
            $scope.categories = data;
        });
    });

});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.