使用then（）调用其他两个函数：错误-无法调用未定义的方法“ then”

Question

Basically I have the function getUserInfo which has one function that returns available and assigned groups within the service. Then I have the other two functions below return those objects. However, I can't run the getAssignedGroups() and getAvailableGroups() before the first function is done. So I thought I'd use the then() to ensure those two ran once the first function was completed.

I have this function in a controller:

$scope.getUserInfo = function(selectedUser) {
    $scope.userGroupInfo = groupService.getUserGroups(selectedUser.domain,$scope.groups).then(
        $scope.assignedGroups = groupService.getAssignedGroups(),
        $scope.availableGroups = groupService.getAvailableGroups()
    );
};

This is my service:

spApp.factory('groupService', function () {
    var assignedGroups, availableGroups, allGroups;

    var getGroups = function () {
        allGroups = [];

        $().SPServices({
            operation: "GetGroupCollectionFromSite",
            completefunc: function(xData, Status) {
                var response = $(xData.responseXML);
                response.find("Group").each(function() {
                    allGroups.push({
                        id: $(this).attr('ID'),
                        name: $(this).attr('Name'),
                        Description: $(this).attr('Description'),
                        owner: $(this).attr('OwnerID'),
                        OwnerIsUser: $(this).attr('OwnerIsUser'),
                    });
                }); 
            }
        });
        return allGroups;
    }
    var getUserGroups = function (selectedUser, allGroups) {
        assignedGroups = [];

        $().SPServices({
            operation: "GetGroupCollectionFromUser",
            userLoginName: selectedUser,
            completefunc: function(xData, Status) {

                var response = $(xData.responseXML);

                response.find("errorstring").each(function() {
                    alert("User not found");
                    booErr = "true";
                    return;
                });

                response.find("Group").each(function() {
                    assignedGroups.push({                       
                        id: $(this).attr('ID'),
                        name: $(this).attr('Name'),
                        Description: $(this).attr('Description'),
                        owner: $(this).attr('OwnerID'),
                        OwnerIsUser: $(this).attr('OwnerIsUser'),
                    });

                });
            }
        });

        //from here I start comparing All Groups with user groups to return available groups
        var assignedGroupsIds = {};
        var groupsIds = {};
        var availableGroups = [];

        assignedGroups.forEach(function (el, i) {
            assignedGroupsIds[el.id] = assignedGroups[i];
        }); 

        allGroups.forEach(function (el, i) {
            groupsIds[el.id] = allGroups[i];
        });   

        for (var i in groupsIds) {
            if (!assignedGroupsIds.hasOwnProperty(i)) {
                availableGroups.push(groupsIds[i]);
            }
        }
/*      return {
            assignedGroups:assignedGroups,
            availableGroups:availableGroups
        }*/
    }
    var getAvailableGroups = function () {
        return availableGroups;
    }
    var getAssignedGroups = function () {
        return assignedGroups;
    };   

    return {
        getGroups:getGroups,
        getUserGroups:getUserGroups,
        getAvailableGroups: getAvailableGroups,
        getAssignedGroups:getAssignedGroups
    }
});

Answer 1

You can inject the Angular promise module into your factory:

spApp.factory('groupService', function ($q) {

Then inside the getUserGroups() function of your factory, declare a deferred object:

var deferred = $q.defer();

Then you need to use deferred.resolve(response) inside your async request and return deferred.promise from your function. Also, the then function takes a function with the returned response as the argument (so you can then access the response from the controller):

$scope.userGroupInfo = groupService.getUserGroups(selectedUser.domain,$scope.groups).then(function(resp) {
    $scope.assignedGroups = groupService.getAssignedGroups(),
    $scope.availableGroups = groupService.getAvailableGroups()
});

Look into the AngularJS docs on $q for more info.

Answer 2

Better approach will be use callback approach. You can take following approach.

$scope.getUserInfo = function(selectedUser, getUserInfoCallback) {
    $scope.userGroupInfo = groupService.getUserGroups(selectedUser.domain,$scope.groups, function (response){
        $scope.assignedGroups = groupService.getAssignedGroups( function (response){
        $scope.availableGroups = groupService.getAvailableGroups( function(response){
            //Here call parent callback
            if(getUserInfoCallback)
            {
                getUserInfoCallback(response); //If you need response back then you can pass it.
            }
        })
        })

    })    
    );
};

Now you need to define each method as callback. Following is sample method for your reference.

$scope.getAssignedGroups = function (getAssignedGroupsCallback){

//Do all operation
//Now call callback
if(getAssignedGroupsCallback)
{
getAssignedGroups();//you can pass data here which you would like to get it return
}

};

Note: I have just added the code to clarify the approach. You need to change it to compile and implement your own logic.

Summary of approach : All services are invoked asynchronously therefore you need to pass callback method as chain (to keep your code clean) so that your code can wait for next step.

Hope it helps.