AngularJS scoping of promise callbacks

Question

I am trying to use promises to tidy up my Angular code a bit. When I enter a callback function (success or error) however. My scope is gone. The $scope, service and object are all null inside the callback.

The variable vm is still known though.

Any ideas on how I can fix this?

(function (app) {
'use strict';
var MyController = (function () {
    function MyController($scope, aService, anotherService) {
        var vm = {
            loaded: false,
            anObjToInstantiate: null,
            error: null
        };

        aService.makeAServiceCall()
            .success(function (result) {
                vm.anObjToInstantiate = result.data;
                anotherService.notifySomething(); /* Null! */
                vm.loaded = true;
            })
            .error(_handleError);

        function _handleError(error) {
            vm.error = error;
        }

        return vm;
    };

    MyController.$inject = ['$scope', 'AService', 'AnotherService'];
    return MyController;
}());

app.controller('MyController', MyController);

}(angular.module('app.amodule')));

Do you have in fiddle. – Carlos Verdes Apr 09 '15 at 10:56 — Carlos Verdes, Apr 09 '15 at 10:56

Pankaj Parkar · Accepted Answer · 2015-04-09T12:33:51.660

You controller is wrongly defined. It shouldn't return anything. All it does is play with scope variable and services.

Controller

(function(app) {
    'use strict';
    var MyController = function($scope, aService, anotherService) {
        $scope.vm = {
            loaded: false,
            anObjToInstantiate: null,
            error: null
        };

        aService.makeAServiceCall()
            .success(function(result) {
                $scope.vm.anObjToInstantiate = result.data;
                anotherService.notifySomething(); /* Null! */
                $scope.vm.loaded = true;
            })
            .error(_handleError);

        function _handleError(error) {
            $scope.vm.error = error;
        }
    };

    MyController.$inject = ['$scope', 'AService', 'AnotherService'];
}());

app.controller('MyController', MyController);

}(angular.module('app.amodule')));

For ControllerAs It would like below

Controller(ControllerAs)

(function(app) {
    'use strict';
    var MyController = function($scope, aService, anotherService) {
        var ctrl = this;
        ctrl.vm = {
            loaded: false,
            anObjToInstantiate: null,
            error: null
        };

        aService.makeAServiceCall()
            .success(function(result) {
                ctrl.vm.anObjToInstantiate = result.data;
                anotherService.notifySomething(); /* Null! */
                ctrl.vm.loaded = true;
            })
            .error(_handleError);

        function _handleError(error) {
            ctrl.vm.error = error;
        }
    };

    MyController.$inject = ['$scope', 'AService', 'AnotherService'];
}());

That actually did the trick. I think it is because the $scope variable is used in the code surrounding the callback it suddenly recognizes it. aService and anotherService are still null inside the callback — Jente Rosseel, Apr 09 '15 at 10:56
@jrosseel does `anotherService.notifySomething()` returns a promise? means does it have any ajax? — Pankaj Parkar, Apr 09 '15 at 11:03
Not necessarily. But anotherService is undefined inside the scope. — Jente Rosseel, Apr 09 '15 at 12:23

AngularJS scoping of promise callbacks

1 Answers1