coderGeek
coderGeek

Reputation: 176

AngularJs access scope variable in another function

I am new to AngularJS and have this following piece of code that I need to edit.

 scope.findData = [];
 scope.clientId;
 scope.identityDocuments_a = [];


scope.getClientIdentityDocuments_a = function(clientID){  
        resourceFactory.clientResource.getAllClientDocuments({clientId: clientID, anotherresource: 'identifiers'}, function(data){
                scope.identityDocuments_a = data;
            });            
        };

        scope.findOptions = function(value){
            var i;
            var deferred = $q.defer();
resourceFactory.clientResource.getAllClientsWithoutLimit({displayName: value, orderBy : 'id', officeId : scope.group.officeId, sortOrder : 'ASC', orphansOnly : true}, function (data) {
                deferred.resolve(data.pageItems);
                  for (i = 0; i <= data.pageItems.length; i++) {

                 scope.clientId = data.pageItems[i].id;
                 scope.getClientIdentityDocuments_a(scope.clientId);
                    //<- I want to access scope.identityDocuments_a here
                }
                scope.findData = data.pageItems;

              });
            return deferred.promise;
        };

Both these functions are under the same controller. I looked at Accessing $scope variable from another method in the same controller Angularjs but it doesn't seem to work. Where am I going wrong? Thanks in advance.

Upvotes: 0

Views: 1103

Answers (1)

Beartums
Beartums

Reputation: 1350

Okay, I see the problem. Your getClientIdentityDocuments_a() is using a callback function. THe asynchronous data retrieval happens seperately and so the value is not set by the time you want to use it. You can fix this by returning a promise

scope.getClientIdentityDocuments_a = function(clientID){
        var defer = $q.defer();  
        resourceFactory.clientResource.getAllClientDocuments(
                  {clientId: clientID, 
                   anotherresource: 'identifiers'}, function(data){
                scope.identityDocuments_a = data;
                defer.resolve(data);
            });            
            return defer.promise;
        };

and then, to use the data in your second function:

scope.getClientIdentityDocuments_a(scope.clientId).then(function(documents) {
       // at this point, the scope.identityDocuments_a should be available,
       // but you could just set it here, since the document variable is
       // returning the same thing
    console.dir(scope.identityDocuments_a) // should have the returned data
    console.dir(documents)                 // should be the same as above
});
// Here, the documents will NOT be available, because this executes before
// the promise is resolved
console.dir(scope.identityDocuments_a) // [] or undefined

UPDATE: To clarify, if in getClientIdentityDocuments_a you were to directly assign the variable, such as

scope.getClientIdentityDocuments_a = function(clientID){
        scope.identityDocuments_a = some_document;
};

You would not need the promise and your code would work. But since you are retrieving the data from an asynchronous source, your second function is trying to use the data before the value has been set.

Upvotes: 1

Related Questions