Question

我一直在使用AngularJS和Cordova，最近发生了一些奇怪的事件。在页面首次加载ng-repeat的随机场合不会渲染列表，但是，数据在本地WebSQL中，并且每当我告诉JavaScript每次调度数据库时，查询都会带回数据。

WebSQL在登录时变为填充状态，登录函数将向API发送请求，收集一些数据然后存储它。一旦页面没有正常加载数据，我将导航到另一个页面，然后返回。此时列表将出现。我使用的技术是IonicFramework（从昨天下载最新的稳定版），Cordova，最后是RequireJS。

JavaScript控制器

// Run the query to gather the applications which are locally stored within the database
$scope.appData = ApplicationService.get_applications();

ApplicationService

/*global define, console */

define(['angular'], function (angular) {
    "use strict";

    var factory = function (ConfigurationService, DatabaseService) {

        return {

            // GET ALL APPLICATIONS SAVED IN SQLITE
            get_applications: function () {
                var i = 0, data = [];
                DatabaseService.raw().query('SELECT * FROM applications', function (tx, res) {
                    if (res.rows.length > 0) {
                        for (i; i < res.rows.length; i += 1) {
                            data[i] = {
                                'first_name': res.rows.item(i).first_name,
                                'last_name': res.rows.item(i).last_name,
                                'name': res.rows.item(i).name,
                                'application_id': res.rows.item(i).application_id
                            }
                        }
                    }
                });

                return data;
            },


        };

    };

    factory.$inject = ['ConfigurationService', 'DatabaseService'];
    return factory;
});

查看文件

            <ion-list>
                <ion-item ng-repeat="data in appData">
                    <a ng-click="highlight({{ data.application_id }})" id="{{ data.application_id }}" class="" title="{{ data.name }}">
                        <h2>{{ data.first_name }} {{ data.last_name }} <p>{{ data.name }}</p></h2>
                    </a>
                </ion-item>
            </ion-list>

一些帮助将不胜感激，因为这被认为是我的申请中的一个主要错误。

Answer 1

我使用PhoneGap和AngularJS也有同样的事情。

我使用150ms的角度计时器，这似乎是足够的时间来读取数据库，然后使用$ scope强制刷新Angular。$ apply（）。我听说使用$ apply并不是一种很好的做法，但我无法获得其他任何工作。

使用此行：

$timeout(function(){ $scope.$apply(); }, 150);

我的应用程序在加载时读取WebSQL数据库，内容显示在ngRepeat中。

    shoppingListApp.controller('BaseController',
    function BaseController($scope, OfflineStorageService, $timeout){

        //fields
        //------------------------------------------------------------------------
        $scope.shoppingList = [];

        //methods
        //------------------------------------------------------------------------
        $scope.init = function () {
            var tempShoppingList = OfflineStorageService.load($scope.tableName);

            if(tempShoppingList) {
                $scope.shoppingList = tempShoppingList;
                $timeout(function(){ $scope.$apply(); }, 150);
            }
        };

        $scope.init();
    }

AngularJS ng-repeat不会在页面加载时呈现

1 个答案: