Угловой http получить от клика

0

У меня довольно сложная ситуация, когда я вызываю данные из API, которые потенциально имеют сотни или даже тысячи результатов. Он включает в себя варианты разбивки на страницы, которые я могу вызвать.

Мне нужно разбить список результатов на страницы, используя данные API.

Страница изначально загружается с помощью $scope.displayData = function (url, page, limit) и $scope.displayData("linktomydata?", 1, 20); с $scope.displayData("linktomydata?", 1, 20); которые возвращают что-то вроде linktomydata?page=1&limit=20 из моего контроллера. Это отображает записи для данных в порядке.

Однако у меня есть директива, чтобы получить общее количество возможных страниц на основе лимита в 20 на страницу, и я использую простой цикл для создания списка ссылок под данными, которые служат для разбивки на страницы. Затем для каждой ссылки назначается функция displayData с соответствующими параметрами.

app.directive ('paginationList', function($timeout) {
    return {
        // Set as a replaceable element
        restrict: 'E',
        link: function(scope, element) {
            $timeout(function () {
                scope.$watch('pagination', function(pagination) {
                    if(pagination) {
                        for (var i = 1; i < scope.pagination.pages + 1; i++) {
                            element.append('<a href ng-click="displayData("linktomydata?", 6, 20)"></li>' + i + '</li></a>');   
                        };
                    }
                });
            })
        }
    }
});

Это должно отобразить страницу 6 доступных данных и по-прежнему ограничено до 20. Однако отображаемые данные пропадают, когда щелкнута ссылка на страницы и ничего не возвращается. никаких ошибок консоли.

Я перепутал свои области или что-то еще? Или я просто собираюсь все это неправильно?

Любая помощь приветствуется.

  • 0
    Вы не element.append('<html>') в Angular. Вы делаете это в JQuery. В Angular вы пишете HTML в виде и показываете / скрываете / генерируете его при условии или с помощью ng-repeat.
  • 0
    Вы должны иметь ng-repeat вместо element.append.
Теги:
angularjs-ng-click

1 ответ

1
Лучший ответ

Да, вы немного смешиваете разные вещи. Это выглядело бы намного лучше:

app.directive ('paginationList', function($timeout) {
return {
    replace: true
    restrict: 'E',
    templateUrl: 'view/paginationList.html',
    link: function(scope, element) {
        var linkToMyData = 'linktomydata?';

        //using underscore range method is the easiest way
        $scope.range = _.range;

        scope.displayData = function(page, limit){
             //do the magic here
        }
    }
}

});

шаблон:

<div>
    <li ng-repeat="page in range(1,pagination.pages)">
        <a href ng-click="displayData(page, 20)">
    </li>
</div>

Применение:

<pagination-list></pagination-list>
Поделиться
  • 0
    Спасибо за ответ и более чистый подход @lamisti. Извиняюсь, но я должен был упомянуть, что scope.pagination.pages не содержит массив или объект данных, а просто значение 15, где ограничение страницы составляет 20 из 298 записей. Будет ли это работать в вашем решении, именно поэтому я изначально выполнял цикл for. Также я считаю, что фактическая функциональность в scope.displayData должна оставаться в контроллере. Большое спасибо
  • 0
    Я обновил мой пример в соответствии с вашими требованиями. Это должно работать таким образом.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню