一些异步计算

-1

我开发一个单页的应用程式与角1 /离子1/PouchDB后如何更新NG-视图的一部分。一些异步计算

在主页上，我想显示一些综合信息，这些信息是从大量数据计算得到的，可能需要几秒钟（我需要通过查询承诺查询PouchDB数据库，然后执行一些计算）。

因此，我想，不要堵塞主页显示，并立即显示，如果没有这个合成。然后，一旦后台工作完成后，我想填充主页的适当<div>。

我的问题是如何做到这一点？

我已经尝试了各种办法：

一个resolve在UI的路由器是行不通的，因为它会阻止主页显示在一切都计算之前，这正是我想要避免的
在表单中显示一个$scope.syntheticData变量（在开始时为空），并将该变量设置为计算值一次计算完成。但主页没有更新。即使有$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，...）

如果我把一个console.log放在$ on事件回调中，它会出现，所以它是当事件是fi时调用红色从服务。

来源

2016-12-06 bfredo123

请将代码粘贴到此处，让我看看您在计算完成时如何更新范围变量。 –

一旦您的数据准备好并且使用ng-if来确定div是否显示，您不能只将加载的变量设置为true吗？ –

具备的功能首先返回一个空的对象，然后填充该对象当异步操作完成：

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摘要循环得到执行。如果没有，没有伤害。

然后在客户端代码：

$scope.syntheticData = expensiveData(params); 

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

HTML

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

在每一个AngularJS消化周期，通过插值{{ }}创建观察者将检查的syntheticData价值，并把它放在DOM当它变得可用时。

来源

2016-12-07 00:21:45 georgeawg

一些异步计算

回答

相关问题