Using http requests, promises, ng-options, and factories or services together

Question

I'm trying to retrieve a list of options from our database and I'm trying to use angular to do it. I've never used services before but I know that's going to be the best way to accomplish what I want if I'm going to use data from my object in other controllers on the page.

I followed a couple tutorials and put together a factory that makes an http request and returns the data. I've tried several ways of doing it, but for some reason nothing is happening. It's like it never runs the factory function and I can't figure out why.

Factory:

resortModule= angular.module('resortApp',[]); 
resortModule.factory('locaService',['$http', function ($http){
    var locaService= {};
    locaService.locations = {};
    var resorts = {};

    locaService.getLocations=
        function() {
            $http.get('/url/url/dest/').success(function (data) {
                locaService.locations = data;   
            });
            return locaService.locations;
        };
    return locaService;

    //This is a function I would like to run in addition to the first one so multiple variables would be stored and accessible 
        /*getResorts:
            function(destination) {
                $http.get('/url/url/dest/' + destination.id).success(function (data) {
                    resorts = data;
                });
                return resorts;
        }*/
}]);


resortModule.controller('queryController',['$scope', 'locaService',   function($scope, locaService) {
    $scope.checkConditional= function (){
            if($("#location").val() == ""){
            $("#location").css('border','2px solid #EC7C22');
            }
    };
    $scope.selectCheck= function (){
        $("#location").css('border','2px solid #ffffff');
        $(".conditional-check").hide();
    };
    $scope.resort;
    $scope.locations= locaService.getLocations();
}]);

I just want the data to be returned and then assigned to the $scope.locations to be used for ng-options in the view. Then I want my other function to run on click for the next field to be populated by the variable resort. How would I do this? Any help would be great! Thanks!

Answer 1

$http service returns a promise, and your function should return that promise. Basically your getLocations function should be something like the following

locaService.getLocations=
    function() {
        return $http.get('/url/url/dest/');
    };

Then in your controller you should retrieve the options using this promise:

locaService.getLocations()
    .then(
        function(locations) // $http returned a successful result
           {$scope.locations = locations;}
       ,function(err){console.log(err)} // incase $http created an error, log the returned error);

Using jquery in controllers or manipulating dom elements in controllers is not a good practice, you can apply styles and css classes directly in views using ng-style or ng-class. Here is an example how all it should look wired up:

resortModule= angular.module('resortApp',[]); 
resortModule.factory('locaService',['$http', function ($http){
    var locaService= {
      locations: {}
    };
    var resorts = {};

    locaService.getLocations= function() {
        return $http.get('/url/url/dest/');
    };
    return locaService;

    //This is a function I would like to run in addition to the first one so multiple variables would be stored and accessible 
        /*getResorts:
            function(destination) {
                $http.get('/url/url/dest/' + destination.id).success(function (data) {
                    resorts = data;
                });
                return resorts;
        }*/
}]);


resortModule.controller('queryController',['$scope', 'locaService',   function($scope, locaService) {
    /* Apply these styles in html using ng-style
    $scope.checkConditional= function (){
            if($("#location").val() == ""){
            $("#location").css('border','2px solid #EC7C22');
            }
    };
    $scope.selectCheck= function (){
        $("#location").css('border','2px solid #ffffff');
        $(".conditional-check").hide();
    };
    */
    $scope.resort;
     locaService.getLocations()
    .then(
        function(locations) // $http returned a successful result
           {$scope.locations = locations;}
       ,function(err){console.log(err)} // incase $http created an error, log the returned error);
}]);