how to send two parameters from a controller to a service in angularjs

Question

I want to send $stateparams.id along with the below,

HTML:

<ion-refresher pulling-text="Pull to refresh..." on-refresh="vm.loadList(true)">
</ion-refresher>
<ion-list>
   <ion-item class="item-remove-animate item-thumbnail-left item-icon-right" ng-repeat="data in vm.menuItems" href="#/app/menu-detail/{{data._id}}" type="item-text-wrap">
      <img ng-src="app/data/images/{{data.imageUrl}}">{{data.categoryName}} <br />
      <p ng-show="{{data.is_recommended}}"><span class="gem-label warning">Chef Special</span></p>
      <i class="icon ion-chevron-right icon-accessory"></i>
   </ion-item>
</ion-list>

Controller:

vm.loadList = function (forceRefresh) {
                appealityApi.getMixedMenu(forceRefresh,$stateParams).then(function (data) {
                    vm.menuItems = data
                }).finally(function () {
                    $scope.$broadcast('scroll.refreshComplete');

I tried as below but the id is not passing to the service(appealityApi),

var params = {
          id : $stateParams.id,
         }
        vm.loadList = function (forceRefresh,params) {
            appealityApi.getMixedMenu(forceRefresh,params).then(function (data) {
                vm.menuItems = data
            }).finally(function () {
                $scope.$broadcast('scroll.refreshComplete');
            });
        };

});
        };

my service is as below ,

function getMixedMenu(forceRefresh,params) {
            $ionicLoading.show({ template: 'Loading...' })

        if (typeof forceRefresh === "undefined") { forceRefresh = false; }

        var deferred = $q.defer(),
            cacheKey = "basicCache",
            basicData = null;

        /*Grab from cache only if this is not a force refresh*/
        if (!forceRefresh) {
            basicData = basicDataCache.get(cacheKey);
            $ionicLoading.hide();
        }
        if (basicData) {
            console.log("Found data inside cache", basicData)
            deferred.resolve(basicData);
            $ionicLoading.hide();
        } else {
            $ionicLoading.show({ template: 'Loading...' })
                 $http.get(SERVER_URL + '/api/templates/getCategories?appId='+$rootScope.appId+'&mainId='+params.id)
                         .success(function(data) {
                             console.log('Received data via HTTP');
                                                      basicDataCache.put(cacheKey, data);
                                                      $ionicLoading.hide();
                                                      deferred.resolve(data);
                             console.log(data);
                         }).error(function(err) {
                             $ionicLoading.hide();
                             console.log('Error while making http call.');
                             deferred.reject();
                         });
        }
        return deferred.promise;
    };

The id returns undefined, I tried everything in the stack-overflow but nothing is working for me

Answer 1

Try the following. See what you get error in log, and i will modify it as per your need.

var idRequired = $stateParams.id //log the $stateParams.id just incase
vm.loadList = function(forceRefresh) {
  appealityApi.getMixedMenu(
          forceRefresh, idRequired)
      .then(function(data) {
          vm.menuItems =
              data
      }).finally(function() {
          $scope.$broadcast(
              'scroll.refreshComplete'
          );
      });
  };

And, in Your Service:

function getMixedMenu(forceRefresh,
    idRequired) {
    console.log(idRequired); //make sure the idRequired is available.
    $ionicLoading.show({
        template: 'Loading...'
    })
    if (typeof forceRefresh ===
        "undefined") {
        forceRefresh = false;
    }
    var deferred = $q.defer(),
        cacheKey = "basicCache",
        basicData = null;
    /*Grab from cache only if this is not a force refresh*/
    if (!forceRefresh) {
        basicData = basicDataCache.get(
            cacheKey);
        $ionicLoading.hide();
    }
    if (basicData) {
        console.log(
            "Found data inside cache",
            basicData)
        deferred.resolve(basicData);
        $ionicLoading.hide();
    } else {
        $ionicLoading.show({
            template: 'Loading...'
        })
        $http.get(SERVER_URL +
            '/api/templates/getCategories?appId=' +
            $rootScope.appId +
            '&mainId=' + idRequired
        ).success(function(data) {
            console.log(
                'Received data via HTTP'
            );
            basicDataCache.put(
                cacheKey,
                data);
            $ionicLoading.hide();
            deferred.resolve(
                data);
            console.log(data);
        }).error(function(err) {
            $ionicLoading.hide();
            console.log(
                'Error while making http call.'
            );
            deferred.reject();
        });
    }
    return deferred.promise;
};