AngularJS - resolve value is defined in ui-router, but in controller is undefined

Question

I have resolve in my route where I return value, which is defined when I console.log it, but in controller it is undefined... I am newbie in Angular and Ionic.

Route

.state('tab.item', {
url: '/collections/item/:itemId',
views: {
  'tab-collections': {
    templateUrl: 'templates/tab-item.html',
    controller: 'ItemCtrl',
    resolve: {
      item: function($localStorage, $stateParams){
        angular.forEach($localStorage.items, function(value, key){
          if (value.id == $stateParams.itemId){
            console.log(value);
            return value;
          }
        });
      },
    }
  }
}

Controller

.controller('ItemCtrl', function($scope, item) {
    $scope.item = item;
    console.log(item);
})

View

<ion-view view-title="{{item.name}}">
    <ion-content>
        {{item}}
        <div>
             <li ng-repeat="image in item.images">
                 <img ng-src="{{image}}" alt="{{item.name}}">
             </li>
        </div>
        <p>{{item.name}}</p>
    </ion-content>
</ion-view>

So why it was working in here?

collection: function($localStorage, $stateParams){
    angular.forEach($localStorage.collection, function(value, key){
       if (value.id == $stateParams.collectionId){
          return value;
       }
    });
 },

this wouldnt ever work afaik

Dane Macaulay
– Dane Macaulay

2015-11-11 20:53:33 +00:00
Commented Nov 11, 2015 at 20:53 — Dane Macaulay
– Dane Macaulay, Commented Nov 11, 2015 at 20:53

paxtonhare · Accepted Answer · 2015-11-11 20:46:44Z

2

Resolve needs you to return a value. You have your return inside of the forEach loop. In order for this to work you will need to return outside of that loop. Perhaps something like:

.state('tab.item', {
url: '/collections/item/:itemId',
views: {
  'tab-collections': {
    templateUrl: 'templates/tab-item.html',
    controller: 'ItemCtrl',
    resolve: {
      item: function($localStorage, $stateParams){
        var result;
        angular.forEach($localStorage.items, function(value, key){
          if (value.id == $stateParams.itemId && !result){
            console.log(value);
            result = value;
          }
        });
        // return outside of the loop
        return result;
      }
    }
  }
}

You might also consider using something other than forEach here since you cannot break out of the loop early. A basic for loop would work just as well.

answered Nov 11, 2015 at 20:46

paxtonhare

3361 silver badge4 bronze badges

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

1 Comment

Blejwi Over a year ago

Accept for advice with basic loop

Dane Macaulay · Accepted Answer · 2015-11-11 20:44:27Z

1

you aren't returning a value in your resolve function, returning in a foreach does not do what you think :)

.state('tab.item', {
    url: '/collections/item/:itemId',
    views: {
      'tab-collections': {
        templateUrl: 'templates/tab-item.html',
        controller: 'ItemCtrl',
        resolve: {
          item: function($localStorage, $stateParams){
            var valueToReturn;
            angular.forEach($localStorage.items, function(value, key){
              if (value.id == $stateParams.itemId){
                console.log(value);
                valueToReturn = value;
              }
            });
            return valueToReturn
          },
        }
      }
    }

answered Nov 11, 2015 at 20:44

Dane Macaulay

8148 silver badges11 bronze badges

2 Comments

Blejwi Over a year ago

Weird thing is that it worked in one route before...

collection: function($localStorage, $stateParams){             angular.forEach($localStorage.collection, function(value, key){               if (value.id == $stateParams.collectionId){                 return value;               }             });           },

Dane Macaulay Over a year ago

doesnt do anything in this case. in a map function it would be the new items of an array

Collectives™ on Stack Overflow

AngularJS - resolve value is defined in ui-router, but in controller is undefined

Route

Controller

View

So why it was working in here?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Route

Controller

View

So why it was working in here?

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related