angularjs bind service array length property to controller scope

Question

I'm trying to bind the array length from an other service to my controller scope like this:

app.controller('TestCtrl', function ($scope, safePostService) {
    $scope.count = safePostService.queue.length;

    $scope.addOne = function () {
        safePostService.post('/echo/json/', {
            json: JSON.stringify({
                text: 'some text',
                array: [1, 2, 'three'],
                object: {
                    par1: 'another text',
                    par2: [3, 2, 'one'],
                    par3: {}
                }
            }),
            delay: 3
        });
    };
});

Thats my service:

app.service('safePostService', function ($http, $timeout) {
    var self = this;

    var syncIntervall = 1000;
    var timeoutPromise;
    var sending = false;

    this.queue = [];

    this.post = function (url, data) {
        self.queue.push({
            url: url,
            data: data
        });
        syncNow();
    };

    function syncNow() {
        $timeout.cancel(timeoutPromise);
        syncLoop();
    }

    function syncLoop() {
        if (sending) return;
        sending = true;
        var item = self.queue[0];
        $http.post(item.url, item.data).
        success(function () {
            self.queue.shift();
            afterResponse(true);
        }).
        error(function () {
            afterResponse(false)
        });
    }

    function afterResponse(success) {
        sending = false;
        if (self.queue.length > 0) {
            timeoutPromise = $timeout(syncLoop, (success) ? 50 : syncIntervall);
        }
    }
});

The $scope.count keeps showing 0 and doesn't get updated.

Here is a fiddle: http://jsfiddle.net/kannix/CGWbq/

Paul Rad · Accepted Answer · 2014-02-27 11:05:07Z

5

Angular should $watch the safePostService.queue.

Try:

$scope.$watch(function() { return safePostService.queue.length; }, function(item) {
  $scope.count = item;
}, true);

Fiddle: http://jsfiddle.net/CGWbq/4/

You decrease the queue array in case of success :

self.queue.shift();

answered Feb 27, 2014 at 11:05

Paul Rad

4,8821 gold badge26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kannix Over a year ago

thank you so much! it works :) What do you mean with this comment: You decrease the queue array in case of success ?

Paul Rad Over a year ago

Just to explain why the count increase before decreasing, not very important :)

Collectives™ on Stack Overflow

angularjs bind service array length property to controller scope

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related