离子框架,集合重复刷新问题

时间:2016-08-20 19:57:55

标签: javascript angularjs ionic-framework

我使用pouchdb作为项目的源,检索数据需要1-2秒。在那个集合之后 - 重复没有刷新列表。

我创建了pen来重现此问题。我该如何强制重绘列表?

js code:

angular.module('ionicApp', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('tabs', {
            url: "/tab",
            abstract: true,
            templateUrl: "templates/tabs.html"
        })
        .state('tabs.home', {
            url: "/home",
            views: {
                'home-tab': {
                    templateUrl: "templates/home.html",
                    controller: 'HomeTabCtrl as main'
                }
            }
        });
    $urlRouterProvider.otherwise("/tab/home");
})

.controller('HomeTabCtrl', function ($scope) {
    this.items = [0];
    setTimeout(function () {
        for (var i = 1; i < 1000; i++)  this.items.push(i);
    }.bind(this), 2000);
});

HTML:

<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Collection repeat Example</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-positive">
        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home">
        <ion-content>
            <ion-list>
                <ion-item collection-repeat="item in main.items">
                    {{item}}
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-view>
</script>
</body>
</html>

0 个答案:

没有答案