8

Possible Duplicate:
angularjs - promise never resolved in controller

I'm wrapping a slow WebSockets server in a AngularJS service, and then calling into that service from my controllers. If I chain callbacks onto callbacks onto callbacks, everything works just fine, any the UI updates asynchronously.

When I try to use $q.defer() to clean up that mess of callbacks, it seems my deferred never gets called. I'm familiar with the concepts of deferred from Python's Twisted, so I think conceptually everything should work - but it doesn't.

This is the shortest example I could come up with, the slow WebSockets server is simulated with a setTimeout function.

<!doctype html>

<html ng-app="beta">
    <head>
        <title>Beta</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
        <script>
            var beta = angular.module('beta', []);

            var BetaCtrl = function ($scope, betaServ) {
                $scope.button = function () {
                    serv_result = betaServ.slow();
                    console.log(serv_result);

                    serv_result.then(function (result) {
                        console.log('callback finished');
                    });
                }
            }

            beta.service('betaServ', function($q) {
                this.slow = function () {
                    d = $q.defer()
                    setTimeout(function () {
                        console.log('before resolve');
                        d.resolve();
                        console.log('after resolve');
                    }, 2000);
                    return d.promise;
                }
            });
        </script>
    </head>
    <body>
        <div ng-controller="BetaCtrl">
            <button ng-click="button()">Run</button>
        </div>    
    </body>
</html>

The could should run as following:

  1. button click
  2. $scope.button() gets called; it calls the service.slow() function
  3. service.slow() returns a deferred
  4. a callback is registered on the deferred
  5. deferred fires, triggering the registered callback (this part never happens)

Any ideas? Thanks.

Community
  • 1
  • 1
klozovin
  • 2,363
  • 2
  • 22
  • 30
  • I've tried changing `setTimeout` to `$timeout`, and it seems to work! I still don't get it, since I'm not updating the UI, just logging to console. And, it still doesn't help in my case, since the delay in the original code is not because of a setTimeout, but because of a WebSockets request. – klozovin Jan 25 '13 at 19:54

1 Answers1

29

You need to call your callback with $apply since it's called outside of Angular. Since this is a service, you'll need to include $rootScope in your service:

beta.service('betaServ', function($q, $rootScope) {
    this.slow = function () {
        d = $q.defer()
        setTimeout(function () {
            console.log('before resolve');
            $rootScope.$apply(d.resolve);
            console.log('after resolve');
        }, 2000);
        return d.promise;
    }
});
Manny D
  • 20,310
  • 2
  • 29
  • 31
  • 1
    Thanks, that fixed it! I tried injecting $scope into the service and then calling $apply, but it seems that $scope can't be injected. Never though about $rootScope. Still, I thought Angular will somehow now that the deferred is being called, without the explicit $apply. – klozovin Jan 29 '13 at 21:03