AngularJS scoping of promise callbacks [duplicate]

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
– Carlos Verdes

2015-04-09 10:56:36 +00:00
Commented Apr 9, 2015 at 10:56 — Carlos Verdes
– Carlos Verdes, Commented Apr 9, 2015 at 10:56

Pankaj Parkar · Accepted Answer · 2015-04-09 12:33:51Z

1

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'];
}());

edited Apr 9, 2015 at 12:33

answered Apr 9, 2015 at 10:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Jente Rosseel Over a year ago

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

Pankaj Parkar Over a year ago

@jrosseel does anotherService.notifySomething() returns a promise? means does it have any ajax?

Jente Rosseel Over a year ago

Not necessarily. But anotherService is undefined inside the scope.

Pankaj Parkar Over a year ago

It should work..check my updated code

Collectives™ on Stack Overflow

AngularJS scoping of promise callbacks [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related