angularjs - Angular ui router view loaded but not passing parameters -

i'm working on website angular ui-router. there page needs pass parameters view. defined states this:

.state('locaties', {             url: "/locaties",             data: {rule: function($cookiestore) {} },             controller: "franchisesctrl",             templateurl: "view/locaties.html"         })             .state('locaties.detail', {                 params: {                     locatieid: 1,                     locatiename: "derptown",                     locatielat: 50,                     locatielong: 50                 },                 url: "/:locatiename",                 controller: "locatiedetailctrl",                 templateurl: "view/locatie.html",                 resolve: {                     locatiedetail:                         function ($stateparams, $http){                             var url ="http://website/api/franchises/" + $stateparams.locatieid + "/nl.json";                             return $http.get(url).then(function(res){                                 return res.data;                             });                         }                 }             }) 

inside locatiedetailctrl there's this

angular.module('premiummeat').controller('franchisesdetailctrl',    function ($scope, $window, franchisedetail) {     $scope.franchisedetail = franchisedetail;   }); 

the "locaties" (plural) view works , when click on specific "locatie" (single), url changes , view gets loaded within locaties view , no parameters passed. on image can see top 2 items "locaties" view. single locatie loaded under "locaties" view. should new page (view) parameters clicked locatie. can me / explain, i'm rather new angular, thank you.

solution

the parameters hard-coded, make them dynamic, syntax needed adjustment according angular docs.

params: {                     locatieid: {value : "1"},                     locatiename: {value : "stad"},                     locatiedescr: {value : "beschrijving"},                     locatielat: {value: 51.2},                     locatielong: {value : 4.4}                 }, 

where parameters passed ui-href this

<a ui-sref="locaties.detail({                 locatieid: item.id,                 locatiename: item.name,                 locatiedescr: item.description,                 locatielat: item.location[0].lat,                 locatielong: item.location[0].long             })"             class="detail">bekijk detail >></a>