一部の非同期計算後にng-viewの一部を更新する方法

Question

Angular 1/Ionic 1/PouchDBのシングルページアプリケーションを開発しています。

ホームページでは、大量のデータを計算した結果の合成情報を表示したいのですが、数秒かかることがあります（私はクエリの約束でPouchDBデータベースにクエリを実行する必要がありますいくつかのコンピューティング）。

この結果、私はホームページの表示をブロックし、この合成なしですぐに表示させたいと思います。その後、バックグラウンド作業が終了したら、適切な<div>のホームページを作成したいと思います。

私の質問は、私は様々なアプローチを試してみました...これを行う方法を

である：それは表示するためにホームページを妨げるので

• UI-ルータのresolveは動作しませんすべてが計算される前に、これは私が避けたいものです。

• $scope.syntheticDataの変数（最初は空）をフォームに表示し、この変数を計算値に1回設定します計算が終了する。しかし、ホームページは更新されません。 $scope.$apply()でさえ。

• は、計算が終了したときに$rootScope.$broadcastでトリガされるイベントを有する。私は$scope.$onとホーム・ページ・コントローラーからこのイベントを聞きます。イベントを受け取った後、受け取った値に$scope.syntheticDataを設定しますが、それでも動作しません。 $scope.$applyでさえ。

私はこれが非常に基本的なものだと感じていますが、解決する方法は見つけられません。ご協力いただき誠にありがとうございます！ここでは、Harshilシャーさんのコメントに答えるために

---

は、私のコードのいずれかのバージョンでは、スコープを更新するためのコントローラである：で

// ctrl function 
    $scope.syntheticData = {}; 

    $scope.$on('updateSynthetic', function() { 
    $scope.syntheticData = {}; // trial to make sure Angular sees a change on next line... 
    $scope.syntheticData.info1 = synthesis.data.info1; 
    $scope.$apply(); 
    }); 

synthesisは、PouchDBクエリによってDBのデータを取得するサービスですthen()を計算し、結果をsynthesis.data.info1（とinfo2、info3、...）に格納する

$ onイベントコールバックにconsole.logを入れると、それが表示されますイベントがfiのときに呼び出されます赤いサービスから。

function expensiveData(params) { 
    var emptyObject = {}; 
    emptyObject.$resolved = false; 
    var derivedPromise = asynchronousAPI(params).then(function(data) { 
     //Do computation here 
     //.. 
     //Populatate emptyObject 
     angular.copy(data, emptyObject); 
     emptyObject.$resolved = true; 

     //return data for chaining 
     return data; 
    }); 

    emptyObject.$promise = $q.when(derivedPromise); 

    return emptyObject; 
}); 

派生約束はAngularJSの枠組みの外から来る場合、$q.whenは必ずAngularJSダイジェストことを確認します。

Answer 1

は、関数が最初に非同期操作が完了したときに、そのオブジェクトを移入、その後、空のオブジェクトを返すようサイクルが実行されます。そうでなければ、害はありません。

そして、クライアントコードで：すべてのAngularJSで

$scope.syntheticData = expensiveData(params); 

syntheticData.$promise.then(function(data) { 
    //DO more stuff here 
}); 

HTML

<div>{{syntheticData}}</div> 

補間{{ }}によって作成されたウォッチャがsyntheticDataの値をチェックし、DOMにそれを置く、サイクルダイジェストそれが利用可能になったとき。