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

我一直在使用AngularJS和Cordova，最近发生了一些奇怪的事件。在页面第一次加载ng-repeat的随机场合下，将不会呈现出列表，但是，数据在本地WebSQL中，并且每当我告诉JavaScript到console.log数据时，查询每次都会带回数据。AngularJS ng-repeat不会在页面加载时呈现

WebSQL在登录时变得填充，登录功能将向API发送请求，收集一些数据然后存储它。一旦页面没有正常加载数据，我会导航到另一个页面，然后返回。此时该清单将出现。我使用的技术是IonicFramework（从昨天下载最新的稳定版），科尔多瓦，最后是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>

一些感谢您的帮助，因为这被认为是我的应用程序中的一个主要错误。

来源

2014-11-21 GNewton

是websql本机支持的吗？因为如果你使用websql插件，你可能需要使用scope.apply来立即反映视图中的变化，因为在这种情况下，你的代码将在角度上下文之外执行。 – Amitesh 2014-11-21 09:28:09

@Amitesh对不起，我已经离开办公室了。它本机支持，我们正在使用Google Chrome来模拟应用程序。当移动应用程序编译到设备（使用Cordova）时，同样的事情会再次发生。 – GNewton 2014-11-24 09:47:50

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

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

使用此行：

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

我的应用程序读取负载的WebSQL DB和内容显示在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(); 
    }

来源

2015-02-12 22:09:59 Robert

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

回答

相关问题