Question

数组更改时，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时，它只是从具有不同OFFSET的SQL语句中获取数据，但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;
            }
          }
        ]
      );

Answer 1

该代码使用的deferred anti-pattern书写不正确。 $q.defer仅解析一次。随后对defer.resolve的调用将被忽略。这就是承诺的工作方式。

除了.success and .error methods are deprecated and have been removed from the AngularJS framework。

解决方案是避免使用延迟的反模式，并使用.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() Promise方法，但是请注意，方法签名和返回值是不同的。

.then方法返回一个新承诺，该新承诺通过successCallback，errorCallback的返回值来解决或拒绝（除非该值是一个promise），在这种情况下，使用承诺链使用在该承诺中解决的值来解决）。

有关更多信息，请参见

使用$ http的服务未返回新数据

数组更改时，AngularJS ng-repeat不变

1 个答案: