How to call data on Ionic with API - ios

Question

I edited my codes
.factory('ProductsService',['$ionicSideMenuDelegate', '$http', 'ApiEndpoint', '$ionicTabsDelegate', '$ionicSlideBoxDelegate', '$stateParams', 'AuthService', function($ionicSideMenuDelegate, $http, ApiEndpoint, $ionicTabsDelegate, $ionicSlideBoxDelegate, $stateParams, AuthService){
var products = [];
var prod = [];
return {
GetProducts: function(){
return $http.get(ApiEndpoint.url + '/products', {}).then(function(response){
products = response.data.products;
return response;
});
},
GetProduct: function(productId){
angular.forEach(products, function(product, key){
$scope.prod = {}; //ERROR: $scope is not defined
if(product.id == productId){
prod = product;
return product;
}
})
return prod;
}
}
}])
..after I click the item that error appears..And the page doesnt show the details must shown..

Answer 1

I am not sure if I got your question.
Usally every View has its own Controller. So in your case one controller for the menu.html and for the productpage. Of course you can also use the same controller for both views.
If you want to use one controller for both views the controller can provide the data for both views.
If you want a controller for each view you have to share to data between the controllers. For sharing data between different controllers you can find a lot of help:
- Stackoverflow share data between controllers
- Thinkster using services to share data between controllers
In both solutions you had to call your api in this services. For that you should understand the angularjs concept of $q and promises:
Angularjs Documentation of $q
If could specifiy which data you want to call from which page to another, I can improve this answer.
EDIT:
Based on your comment I can add the following suggestion. In your products.html you want to display the details of a choosen product. Thats roughly said a master-detail-pattern. You can take a look at this: Master-Detail-Pattern.
You will have to change your state-config and add a state for the product-details. Something like that (you will have to change the code):
.state('productDetails', {
url: "/product/:id",
templateUrl: 'templates/product.html',
controller: 'yourCtrl'
});
In your controller you can get the given :id over the state-params:
var productId= $stateParams.id;
To achive that it works you also have to edit your menu.html. For every product you need a link which looks like:
{{product.name}}
This has to be wrapped in your ng-repeat. But that is all discribed on the given page.
Of course there are also other possibilities to do what you want.