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">
<h2>{{artistesItem.name}}</h2>
<hr class="star-primary"/>
</div>
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?
condition
.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;
});
}]
}
})
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 data. Then in the HTML page I link to {{image}} like ... what am I missing?
<a ui-sref="artistView({id: artistesItem.id})">Click TEST</a>
source to share
ui-serf
do not use interpolation directive as you want to pass id parameter to route, you must pass this parameter inside json as {id: artistItem.id}
this will create attribute href
and will contain url withid
Markup
<a ui-sref="artistView({id: artistItem.id})">Click TEST</a>
Update
To pass multiple parameters from $stateParams
1 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;
}
});
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.
source to share