cg-busy on consecutive promises

Question

I have a factory which stores and periodically updates some data using a service($http call). I want the busy indicator in the view every time the data is being updated. The factory exposes the data object and the promise.

angular.module('myUI')
  .factory('statusFactory', function ($timeout, statusService) {
    var promise = {};
    var data = {};

    function update(){
        angular.extend(promise, statusService.status().$promise).then(function(response){
            angular.extend(data, response);
        });
        $timeout(update, 10000);
    }
    update();

    return{
        data: data,
        promise: promise
    }
});

In the controller, I bind these variables to scope:

  $scope.statusPromise = statusFactory.promise;
  $scope.data = statusFactory.data;

And finally in the view I present the data

<div cg-busy="statusPromise">
    {{data.var1}}
    {{data.var2}}
    ...
</div>

Now the data is being updated flawlessly, but cg-busy does nothing. I would expect the busy icon every time the $http call is being resolved. It works when I use the statusService directly in the controller.

Is there some better way to do it? How can I expose some persistent promise from the factory so that it updates view on every new call?

score 1 · Accepted Answer · answered Apr 27 '17 at 15:42

I would try something like this:

angular.module('myUI')
  .factory('statusFactory', function ($timeout, statusService) {
    var promise = {};
    var data = {};
    var busyIndicator = {busy: false};

    function update(){
        busyIndicator.busy = true;
        angular.extend(promise, statusService.status().$promise).then(function(response){
            angular.extend(data, response);
            busyIndicator.busy = false;
        });
        $timeout(update, 10000);
    }
    update();

    return{
        data: data,
        promise: promise
    }
});

Bind it to $scope:

$scope.busyIndicator= statusFactory.busyIndicator;

And then bind it to cg-busy (I presume it takes true or false):

<div cg-busy="busyIndicator.busy">
    {{data.var1}}
    {{data.var2}}
    ...
</div>

busy needs to be used inside busyIndicator object, to share a reference between factory and view. Also, check if cg-busy is working at all, with hard-coded true value.

cg-busy on consecutive promises

1 Answers1