UI Router, Passing Data From Parent Controller

Question

I'm attempting to refactor a website into Angular through UI-Router. On the parent component I have defined some data on the controller. How do I pass this data to the child nested routed component through UI-Router? UI-Router's resolve only works when you have a binding on data, but I don't know if it's possible to bind the parent controller data to the parent component.

const main = angular.module('main', ['ui.router']);

main.config(function($stateProvider) {
  const states = [
      { name: 'parent', url: '/parent', component: 'parent' },
      { name: 'parent.child', url: '/{childUrl}', component: 'child',
        resolve: {
          data: function($transition$) {
            // I want to pass in { name: 'Name1', content: 'Page-Long Content1' }, { name: 'Name2', content: Page-Long Content2' }
            // How do I do this?
          }
        }
      }
    ];
    states.forEach(function(state) {
      $stateProvider.state(state);
    });
  });

angular.module('main')
  .component('parent', {
    template:
    '<div ng-repeat="data in $ctrl.data">' +
    '<p>{{data.name}}</p>' +
    '<a ui-sref="parent.child({ childUrl: data.name })" ui-sref-active="active">Child link</a>' +
    '</div>' +
    '<ui-view></ui-view>',

    controller: function() {
      this.data = [
        {name: 'Name1', content: 'Page-Long Content1'},
        {name: 'Name2', content: 'Page-Long Content2'}
      ]
    }
  });

angular.module('main')
  .component('child', {
    bindings: { data: '<' },
    templateUrl: 'link.html',
  });

Storing data and retrieve it after --> services (factory), local storage or (not advised) rootScope. Pass data from one controller to another --> event triggering and listening — Alburkerk
– Alburkerk, Commented Jun 24, 2017 at 8:06

Pankaj Parkar · Accepted Answer · 2017-06-24 05:47:51Z

1

Basically you have an unique identifier of your record in the URL. So by that you can retrieve your data once again from the dataset. For achieving the same, I'd suggest you to put your data in service and then fetch the same data in resolve of your state. Afterward apply an filter over the data and get desired record from it based on childUrl parameter of state.

angular.module('main')
.service('dataService', function(){
    var dataService = this;
    dataService.getData = getData;
    var data = [
        {name: 'Name1', content: 'Page-Long Content1'},
        {name: 'Name2', content: 'Page-Long Content2'}
    ];

    function getData(){
        return data;
    }

});

state

const states = [
  { name: 'parent', url: '/parent', component: 'parent' },
  { name: 'parent.child', url: '/{childUrl}', component: 'child',
    resolve: {
      data: function($transition$, dataService) {
         let childUrl = $transition$.params('childUrl');
         //in case of API call below will be changed to promise driven code.
         return dataService.getData().filter((item) => item.name === childUrl)[0];
      }
    }
  }
];

And inside a parent controller you can fetch data from service directly.

controller: function(dataService) {
  this.data = dataService.getData();
}

edited Jun 24, 2017 at 5:47

answered Jun 24, 2017 at 5:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Hadoren Over a year ago

Thanks, it works! Really altered my way of thinking!

Collectives™ on Stack Overflow

UI Router, Passing Data From Parent Controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related