离子无限涡旋失败与离子

I'm getting data from a web service and should get for each time you try to update, so the last id to load from the back to. That works fine for me, the problem is in the ion-scroll. I saw that if you are not accompanied by a ng-if infinite information load times quite uncomfortable. If there are data determined charge, if the charge, otherwise not charge anything and that is where I set value for my variable ng-if. But once the true seteo does not load my scroll anymore.

我从Web服务获取数据,并且每次尝试更新时都应该获取数据,因此从后面加载的最后一个ID。这对我来说很好,问题在于离子滚动。我看到如果你没有伴随着ng-if无限的信息加载时间非常不舒服。如果有数据确定充电,如果充电,否则不收取任何费用,这就是我为我的变量ng-if设置的值。但是,一旦真正的seteo不再加载我的卷轴。

HTML

<ion-infinite-scroll on-infinite="loadMore()" ng-if="!noMoreItemsAvailable" distance="1%"></ion-infinite-scroll>

$scope.refreshView = function () {
    if (!navigator.onLine) {
        $scope.hide();
        $ionicPopup.show({
            title: 'Notificación',
            subTitle: '',
            content: 'No tienes conexión a internet.',
            buttons: [{
                text: 'Aceptar',
                type: 'button-positive',
            }, ]
        })
    } else {
        console.log($scope.ultima_id);
        if (typeof $scope.ultima_id == "undefined" || $scope.ultima_id == "") {

        } else {
            console.log(UrlService.url + 'refreshView/' + sessionService.get("user_id") + '/' + sessionService.get("hash") + "/" + $scope.ultima_id);
            $http({
                    method: 'GET',
                    url: UrlService.url + 'refreshView/' + sessionService.get("user_id") + '/' + sessionService.get("hash") + "/" + $scope.ultima_id
                })
                .success(function (data) {
                    console.log("Refresh " + data);
                    if (data.Count > 0) {
                        $scope.viewsDespeglables = true;
                        angular.forEach(data.View, function (value, key) {
                            if (data.Count - 1 == key) {
                                $scope.ultima_id = value.id;
                            }
                            $scope.views.push(value);
                        });
                    } else {
                        console.log(data);
                        $scope.noMoreItemsAvailable = true;
                    }
                })
                .error(function () {})
                .finally(function () {
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
        }
    }
}

$scope.loadMore = function () {
    $scope.refreshView();
    $scope.$broadcast('scroll.infiniteScrollComplete');
    $scope.$broadcast('scroll.resize');
};

1 个解决方案

#1

Why not use a collection repeat? What is a collection repeat? : From the ionic Docs: "collection-repeat allows an app to show huge lists of items much more performantly than ng-repeat.

为什么不重复使用集合?什么是集合重复? :来自离子文档:“集合重复允许应用程序显示大量项目列表比ng-repeat更高效。

It renders into the DOM only as many items as are currently visible.

它只向DOM呈现与当前可见的项目一样多的项目。

This means that on a phone screen that can fit eight items, only the eight items matching the current scroll position will be rendered.

这意味着在可以容纳八个项目的电话屏幕上,将仅呈现与当前滚动位置匹配的八个项目。

The Basics:

The data given to collection-repeat must be an array. If the item-height and item-width attributes are not supplied, it will be assumed that every item in the list has the same dimensions as the first item. Don't use angular one-time binding (::) with collection-repeat. The scope of each item is assigned new data and re-digested as you scroll. Bindings need to update, and one-time bindings won't. "

给予collection-repeat的数据必须是一个数组。如果未提供item-height和item-width属性,则将假定列表中的每个项目都与第一个项目具有相同的维度。不要使用带有集合重复的角度一次性绑定(::)。为每个项目的范围分配新数据并在滚动时重新消化。绑定需要更新,而一次性绑定则不需要。 “

Code:

<body ng-controller="MainCtrl as main">
  <ion-header-bar class="bar-positive">
    <h1 class="title">1000 Items</h1>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item collection-repeat="item in main.items">
        {{item}}
      </ion-item>
    </ion-list>
  </ion-content>
</body>

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

myApp.controller('MainCtrl', function() {
  this.items = [];
  for (var i = 0; i < 1000; i++) this.items.push(i);
});

#1