Pass data from one state to another

Issue

Right now I’m using UI-router’s states for navigation and NG-repeat (within a page) for listing artists. When someone clicks on an artist it opens up a modal view with more details and bio.

The modal gets the data from NG-repeat and Index…

<div id="{{$index}}" aria-hidden="true" role="dialog" tabindex="-1" class="portfolio-modal modal fade">
<div class="col-lg-12">
                <h2>{{artistesItem.name}}</h2>
                <hr class="star-primary"/>
              </div>

What I’d like to do is pass the artist data to another page where we can get the full URL path for the artist bio so someone can link to this.

I’ve looked into a couple of docs and articles on the web and I’ve got part of my answer so obviously my code below isn’t working as expected. The artist page opens but isn’t passing anything as I get a screen with only the buttons. The console does mention ID as undefined but the URL is indeed showing the right ID?

State

  .state('artistView', {
      url: 'musique/{id}',
      views: {
          '':{ templateUrls: 'index.html'},
          'navbar' : { templateUrl: 'views/navbar.html'},
          'artist' : { templateUrl: 'views/artist.html'},
          'footer': { templateUrl: 'views/footer.html'}
      },
      controller: 'ViewOneArtist',
      resolve: {
          artistView: ['$http', '$stateParams', function($http, $stateParams) {
              return $http.get($stateParams.id).then(function(data) {
                  return data.data;
              });
          }]
      }
  })

The controller

app.controller('ViewOneArtist', function($scope, $http, $resource, artistesUrl, baseUrl) {

$scope.artistesItemsResource = $resource(baseUrl + artistesUrl + ":id", {id: "@id"},
    { create : { method: "POST"}, save: { method: "PUT"}}
);

$scope.id = id;

$scope.listOneArtiste = function(id) {

    $scope.artistesItems = $scope.artistesItemsResource.get(id);
};

$scope.listOneArtiste(id);

});

HTML link passing the data. Then on the HTML page I bind with {{image}} for example…what I am missing?

 <a ui-sref="artistView({id: artistesItem.id})">Click TEST</a>

Solution

ui-serf should not use interpolation directive, as you wanted to pass id parameter to route, you should pass that parameter inside json like {id: artistItem.id}, this will create href attribute & that will contains url with id

Markup

<a ui-sref="artistView({id: artistItem.id})">Click TEST</a>

Update

For passing multiple parameter from the $stateParams 1st you need to register each parameter inside you $state definition

 .state('artistView', {
      url: 'musique/{name}',
      views: {
          '':{ templateUrls: 'index.html'},
          'navbar' : { templateUrl: 'views/navbar.html'},
          'artist' : { templateUrl: 'views/artist.html'},
          'footer': { templateUrl: 'views/footer.html'}
      },
      parmas: {
          'name': {value: null}, //set value it default to null if not passed
          'bio': {value: null},
          'image': {value: null},
          'facebook': {value: null},
          'twitter': {value: null},
          'instagram': {value: null},
          'googleplus': {value: null},
          'site': {value: null},
          'nextEvent': {value: null},
          'devisTechnique': {value: null},
          'video': {value: null},
          'authorized': {value: null},
          'exclusif': {value: null}
      },
      controller: function($scope, $stateParams) {
          //pass URL
          $scope.name = $stateParams.name;
          //pass data for artist page
          $scope.bio = $stateParams.bio;
          $scope.image = $stateParams.image;
          $scope.facebook = $stateParams.facebook;
          $scope.twitter = $stateParams.twitter;
          $scope.instagram = $stateParams.instagram;
          $scope.googleplus = $stateParams.googleplus;
          $scope.site = $stateParams.site;
          $scope.nextEvent = $stateParams.nextEvent;
          $scope.devisTechnique = $stateParams.devisTechnique;
          $scope.video = $stateParams.video;
          $scope.authorized = $stateParams.authorized;
          $scope.exclusif = $stateParams.exclusif;
      }
  });

Above solution will work, though I don’t think the way your doing is good enough. Better Approach would be create an service which will keep a track of this all parameter.

Answered By – Pankaj Parkar

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.