How to resolve data into nested view multiple times, with different data

Question

I am using the AngularJS framework (as well as its ui-router), and I am having a hard time getting my data to resolve the way I want. I will give an example below of what I am trying to do:

$stateProvider
  .state('home',{
    views: {
      'test': {
        templateUrl: 'test.html',
        resolve: {
          config: function() {
            var result = /*service call that returns json*/
            return result;
          }
        }
        controller: function($scope, config){
          console.log(config);
        }
      },
      'test': {
        templateUrl: 'test.html',
        resolve: {
          config: function() {
            var result = /*service call that returns DIFFERENT json*/
            return result;
          }
        }
        controller: function($scope, config){
          console.log(config);
        }
      }
    }
  })

<div ui-view="test">
<div ui-view="test">

Is there any way in which to uniqely assign and inject 'config' into the controller so that it contains the json that its respective service call returned? The idea here is I want the same template but with different configs coming into them (scoped to that particular view). Right now, config just contains the last resolve that was executed.

I hope I am not confusing. Let me know if you need any clarifications...Much appreciated!

Your second definition of test will only overwrites the first test. — ThiagoPXP
– ThiagoPXP, Commented Oct 7, 2015 at 23:03

Anid Monsur · Accepted Answer · 2015-10-07 23:00:22Z

1

The views need to be named differently and so do the resolves. Using the same template for both of them is not an issue. Lastly, the resolve has to be relative to the state, not the views.

$stateProvider
  .state('home',{
    views: {
      'test': {
        templateUrl: 'test.html',
        controller: function($scope, config){
          console.log(config);
        }
      },
      'test2': {
        templateUrl: 'test.html',
        controller: function($scope, config2){
          console.log(config2);
        }
      }
    },
    resolve: {
      config: function() {
        var result = /*service call that returns json*/
        return result;
      },
      config2: function() {
        var result = /*service call that returns DIFFERENT json*/
        return result;
      }
    }
  })

<div ui-view="test">
<div ui-view="test2">

answered Oct 7, 2015 at 23:00

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

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

9 Comments

jkossis Over a year ago

Is there a way in which to have it work with the same view names and resolve names? And I originally thought the same thing (the rsolve has to be with the state), but found out you can do it either way through trial and error. If not, could I possibly pass it through state params to avoid having to change the view name?

Anid Monsur Over a year ago

Could you pass what through state params?

Estus Flask Over a year ago

The part regarding resolves is not correct. Views can have their own resolves, though I'm not sure if it was documented. And their resolves (which are local dependencies that are injected into controller) can have the same names, they won't collide, unless state's resolve overwrites them.

Anid Monsur Over a year ago

This is directly from the ui-router wiki: The resolve keyword MUST be relative to state not views (in case you use multiple views).. As far as I know, that is still accurate, but it may not be.

jkossis Over a year ago

Estus - when you say they won't collide unless the state's resolve overwrites them, I have two views with the same resolve name, and they are taking on the same value when injected into the controlled. I'm assuming it's whichever one executed last. My impression is that the injected name in the controller is not just scpoed to that view, otherwise what you say would make sense...any advice.

|

Collectives™ on Stack Overflow

How to resolve data into nested view multiple times, with different data

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related