How to pass variable from function inside controller to controller scope?

Question

I have the following controller:

myApp.controller('myCtrl', ['$scope', '$rootScope', '$location', 'myService',
    function($scope, $rootScope, $location, myService) {
        $scope.myArray = [];
        $scope.myFunction = function() {
            if (something) {
                setTimeout(function(){
                    $scope.myFunction();
                },500);
            } else {
                var itm = $rootScope.var;

                for (var i in itm) {
                    if (itm.hasOwnProperty(i)) {
                        $scope.myArray.push(itm[i].value);
                    }
                }
                // first console.log
                console.log($scope.myArray);
            }
        }

        $scope.myFunction();

        // second console.log
        console.log($scope.myArray);
    }   
]);

In the example above the second console.log gets printed before the first one. Why is this the case? Is there a way to make the controller wait for the function to be executed/returned and only after that proceed to execute the rest of the code?

how you detect first and second log? can you provide plunkr? — Grundy
– Grundy, Commented Nov 12, 2015 at 18:57
You only have one $scope here. A plunkr/codepen would definitely help debug what you're seeing as it is more than likely a logic glitch. Also, if you are ever doing something with a scope that you want to propagate, make sure you never use setTimeout or pure callbacks without using $scope.apply() — Jaime Torres
– Jaime Torres, Commented Nov 12, 2015 at 18:59
I am also confused about what scope is what. But I am 99% sure you can solve using .bind(). So you could do something like function(){}.bind($scope) and then within function use this.myArray instead. — EvilZebra
– EvilZebra, Commented Nov 12, 2015 at 19:01
Print what contains $rootScope.var. Probably its doesn't ready at start but ready after some time? — Farkhat Mikhalko
– Farkhat Mikhalko, Commented Nov 12, 2015 at 19:02
@henser I've also recommended to use $timeout instead of setTimeout. — Farkhat Mikhalko
– Farkhat Mikhalko, Commented Nov 12, 2015 at 19:38

jkerb · Accepted Answer · 2015-11-12 20:39:33Z

Without seeing how everything is being implemented. This is the best I can help you with. If you want a controller to do something only if a promise is successful you can wrap your code around the request. In the plunkr I have written a sample $http service that has a fake request to myFunction that uses $q.

I would suggest using a factory to share data between controller instead of $rootScope. $rootScope is hard to manage throughout big SPA's. The Plunkr has commented options you can mess with to change between $rootScope and using a Factory.

Service below

app.service('Service', Service);

function Service($q, $rootScope, Factory) {
  var deferred = $q.defer();

    this.myFunction = function(){
            //Using factory to persit data instead of $rootScope
            //var itm = Factory.myArray;

            var itm = $rootScope.var;
            var array = [];

            //Item isnt set return error
            if(itm === undefined || itm === null) deferred.reject("$rootScope.var is not set")

            //Changed this a bit didnt know what $rootScope.var actually was
            for (var i in itm) {
                array.push(itm[i]);
            }

            deferred.resolve(array);
            return deferred.promise;
        }

    return this;
}

The first thing the controller does is initializes a request to Service.myFunction() and waits for a success or error callback. After the success you can process and do anything you'd like with the data returned from the promise. If there is an error you can handle it as you see fit.

app.controller('controller', controller);

function controller(Service, $rootScope) {
    /* jshint validthis: true */
    var vm = this;
    vm.myArray = [];
    vm.request = "";

    //Un-Comment this to return success or error
    $rootScope.var = [1,2,3,4,5,6];

    //This is a fake http request
    Service.myFunction().then(
      //if the promise was resolved or $http was a success
      //initilize the controller
        function(data) {

            vm.myArray = (data)


        },
        //if the promise was resolved or $http was a success
        //initilize the controller
        function(err) {
            vm.request = (err)
        })
}

Plunkr

+1. Thanks for the $q example. It really helped to better understand the concept. I ended up using $broadcast. I only found out now this functionality that works as a custom event emitter/mediator. I've set $rootScope.$broadcast('loaded'); after the http request (inside the success method) and did a $scope.on('loaded', function(){ /* code */}); inside the controller myCtrl. It works now!

Collectives™ on Stack Overflow

How to pass variable from function inside controller to controller scope?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related