CODEWITHSUNDEEP
javascripthtmljsonangularjsangular-ui-router
jkossis
jkossis

Reputation: 139

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

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!

Upvotes: 1

Views: 160

Answers (1)

Anid Monsur
Anid Monsur

Reputation: 4538

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

Upvotes: 1

Related Questions