1

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..

Improve this question
7
  • Are you looking for a service? There are many previous posts on this subject: stackoverflow.com/questions/20181323/… stackoverflow.com/questions/12008908/… stackoverflow.com/questions/22408790/… Commented Sep 29, 2015 at 19:50
  • Your GetProducts method needs to return a promise. Currently it doesn't do anything. Change $http.get to return $http.get Commented Oct 1, 2015 at 14:02
  • hi @Andrew McGivery I Edited my question can you help me??. thanks Commented Oct 2, 2015 at 3:40
  • Did you read my last comment? You still aren't returning a promise. Perhaps try reading this article to understand how promises work in the context of Ionic. mcgivery.com/promise-based-architecture-in-an-ionic-app Commented Oct 5, 2015 at 15:25
  • Hi @Andrew McGivery thanks, I have read your last comment and try it but still getting the same problem No output..I-edited my code please check it..thanks.. Commented Oct 6, 2015 at 10:05

1 Answer 1

Reset to default
2

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:

<a href="#/product/{{product.id}}">{{product.name}}</a>

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hi @RH34Serenity, could you add the code of your states. Somewhere you should have the state configuration like that: .state('productDetails', { url: "/product/:id", templateUrl: 'templates/product.html', controller: 'yourCtrl' });
You are messing some things up. - The http get with the url productpage/:id wont to anything. You should still call your api here - The problem ist that this line: var productId = $stateParams.id; $scope.product = ProductsService.GetProduct(productId); is only called once when the controller is instantiated. You could now write a second controller for that detailState and wire that in the states together.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.