Сервис, использующий $ http, не возвращает новые данные - PullRequest
Новая
       39

Сервис, использующий $ http, не возвращает новые данные

0 голосов
/ 09 мая 2019

AngularJS ng-repeat не изменяется при изменении массива

У меня есть контроллер: 

  <section data-ng-controller="FilmController">
    <article data-ng-view></article>
  </section>

Это его контроллер: 

.controller('FilmController',
      [
        '$scope',
        'dataService',
        '$routeParams',
        function ($scope, dataService, $routeParams) {
          var getFilms = function(searchterm, category, page){
            dataService.getFilms(searchterm, category, page).then(
              function(response){
                $scope.films = [];
                $scope.films = response.data;
                let pageLinks = [];
                for (let i = 0; i < response.data[10][0]; i += 10) {
                  pageLinks.push({
                    pageLink: "/wai/wai-assignment/#/films?searchterm=" + searchterm + "&category=" + category + "&page=" + i/10,
                    pageNum: i/10
                  })
                }
                $scope.pageLinks = pageLinks;
                console.log(pageLinks);
              },
              function(err){
                $scope.status = 'Unable to load data' + err;
              },
              function(notify){
                console.log(notify);
              }
            );
          }

          if ($routeParams && ($routeParams.searchterm || $routeParams.category)){
            getFilms($routeParams.searchterm, $routeParams.category, $routeParams.page);
          } else {
            getFilms('','',$routeParams.page);
          }
        }
      ]);

Это маршруты: 

app.config(
        [
            '$routeProvider',

            function ($routeProvider) {
                $routeProvider
                    .when('/films', {
                        templateUrl: 'js/partials/films.html',
                        controller: 'FilmController'
                    })
                    .otherwise({
                        redirectTo: '/'
                    });
            }
        ]
    );

Вот шаблон: 

<section>
  <table>
    <tr data-ng-repeat="film in films">
      <td>{{film.title}}</td>
      <td>{{film.name}}</td>
      <td>{{film.description}}</td>
    </tr>
  </table>
  <a data-ng-repeat="pageLink in pageLinks" ng-href="{{pageLink.pageLink}}">
    {{pageLink.pageNum}}
  </a>
</section>

Когда я получаю доступ films?searchterm=example&category=example&page=1

Показывает фильмы с категорией и критериями поиска из базы данных.Когда я щелкаю ссылку, чтобы перейти к другому page, он просто получает данные из оператора SQL с другим OFFSET, но ng-repeat не обновляется вместе с ним.

Я знаю, почему это происходит, что-то связанное с областями видимости, но я не могу понять, как это исправить.Кто-нибудь может помочь?

РЕДАКТИРОВАТЬ: 

angular.module('filmDirectoryApp')
    .service('dataService',
        [
          '$q',
          '$http',
          function ($q, $http) {
            var urlBase = 'server/';
            var defer = $q.defer();
            this.getFilms = function (searchterm, category, page) {
              $http.get(urlBase + 'getfilms.php?searchterm=' + searchterm + '&category=' + category + '&page=' + page)
                .success(function (response) {
                  console.log(response);
                  defer.resolve({
                      data: response
                  });
                })
                .error(function (err) {
                    defer.reject(err);
                });
                return defer.promise;
            }
          }
        ]
      );

1 Ответ

0 голосов
/ 09 мая 2019

Код использует отложенный анти-шаблон , который написан неправильно. $q.defer разрешается только один раз. Последующие звонки на defer.resolve игнорируются. Так обещают работать.

Кроме того, методы .success и .error устарели и были удалены из среды AngularJS .

Решение состоит в том, чтобы избежать отложенного анти-паттерна и использовать методы .then и .catch. 

angular.module('filmDirectoryApp')
.service('dataService',
    [
      '$http',
      function ($http) {
        var urlBase = 'server/';
        this.getFilms = function (searchterm, category, page) {
          var params = {
              "searchterm": searchterm,
              "category"  : category,
              "page"      : page
          };
          var config = { "params": params };    
          return $http.get(urlBase + 'getfilms.php', config)
            .then(function (response) {
              var data = response.data;
              console.log(data);
              return data;
            })
            .catch(function (err) {
              console.log(err)
              throw err;
            });
        }
      }
    ]
);

Служба $ http устарела: пользовательские методы обратного вызова - .success() и .error() - удалены. Вместо этого вы можете использовать стандартные методы обещания .then() / .catch(), но имейте в виду, что сигнатуры методов и возвращаемые значения отличаются.

Метод .then возвращает новое обещание , которое разрешается или отклоняется с помощью возвращаемого значения successCallback, errorCallback (если только это значение не является обещанием, в этом случае оно разрешается со значением, которое разрешено в этом обещании с использованием цепочки обещаний).

Для получения дополнительной информации см.

...