Transferring data from one state to another (update)

Right now I'm using UI states for navigation and NG-repeat (inside the page) for listing artists. When someone clicks on an artist, it opens a modal view with more details and bio.

The modal receives 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">
                <hr class="star-primary"/>


What I would like to do is pass the artist data to another page where we can get the full url for the artist biography so that someone can link to that.

I have looked at several docs and articles on the internet and I have part of my answer, so obviously my code below is not working as expected. The artist page opens but doesn't skip anything as I get a screen with only buttons. The console mentions ID as undefined, but does the URL actually show the correct ID?


  .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($ {



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

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

$ = id;

$scope.listOneArtiste = function(id) {

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




HTML link passing data. Then in the HTML page I link to {{image}} like ... what am I missing?

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



source to share

1 answer


do not use interpolation directive as you want to pass id parameter to route, you must pass this parameter inside json as {id:}

this will create attribute href

and will contain url withid


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



To pass multiple parameters from $stateParams

1 you need to register each parameter inside you $state


 .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
          $ = $;
          //pass data for artist page
          $ = $;
          $scope.image = $stateParams.image;
          $scope.facebook = $stateParams.facebook;
          $scope.twitter = $stateParams.twitter;
          $scope.instagram = $stateParams.instagram;
          $scope.googleplus = $stateParams.googleplus;
          $ = $;
          $scope.nextEvent = $stateParams.nextEvent;
          $scope.devisTechnique = $stateParams.devisTechnique;
          $ = $;
          $scope.authorized = $stateParams.authorized;
          $scope.exclusif = $stateParams.exclusif;


The above solution will work, although I don't think your affairs are good enough. The best approach would be to create a service that monitors this setting.



All Articles