2014-11-21 2 views
0

저는 AngularJS를 Cordova와 함께 사용하고 있으며 최근에는 이상한 이벤트가 발생했습니다. 페이지가 처음으로로드 될 때 ng-repeat가 목록을 렌더링하지 않지만 데이터가 로컬 WebSQL에 있고 쿼리가 매번 JavaScript를 console.log에 기록 할 때마다 데이터를 다시 가져 오는 중입니다.AngularJS ng-repeat가 페이지로드시 렌더링되지 않음

로그인 할 때 WebSQL이 채워지면 login in 함수는 API에 요청을 보내고 일부 데이터를 수집 한 다음 저장합니다. 페이지가 정상적으로 데이터를로드하지 않으면 다른 페이지로 이동 한 다음 다시 이동합니다. 이 시점에서 목록이 나타납니다. 내가 사용하고있는 기술은 IonicFramework (어제부터 최신 안정 버전을 다운로드 함), Cordova 및 마지막으로 RequireJS입니다.

자바 스크립트 컨트롤러

// 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> 

일부 이것이 내 응용 프로그램 내에서 주요 버그로 간주되므로 도움을 주시면 감사하겠습니다.

+0

은 기본적으로 websql을 지원합니까? websql 플러그인을 사용하는 경우 scope.apply를 사용하여 변경 사항을 즉시 반영해야하므로이 경우 코드가 각도 컨텍스트 외부에서 실행될 수 있기 때문입니다. – Amitesh

+0

@Amitesh 긴 답변을 드려서 죄송합니다. 기본적으로 Google 크롬을 사용하여 애플리케이션을 에뮬레이션합니다. 모바일 앱이 장치에 컴파일되면 (Cordova 사용) 동일한 문제가 다시 발생합니다. – GNewton

답변

1

나는 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(); 
    } 
관련 문제