Angular ui router view loaded but not passing parameters

I'm working on a website with angular ui-router. There is a page which needs to pass some parameters to another view. I defined my states like 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: {
                        function ($stateParams, $http){
                            var url ="http://website/api/franchises/" + $stateParams.locatieID + "/nl.json";
                            return $http.get(url).then(function(res){

Inside LocatieDetailCtrl there's this

  function ($scope, $window, franchisedetail) {
    $scope.franchiseDetail = franchisedetail;

The "Locaties" (plural) view works properly and when I click on a specific "locatie" (single), the url changes and the view gets loaded within the locaties view and no parameters are passed. On the image you can see the top 2 items from the "locaties" view. Then a single locatie is loaded under the "locaties" view. This should be a new page (view) with the parameters from the clicked locatie. Can anyone help me / explain, I'm rather new to angular, thank you.



The parameters where hard-coded, to make them dynamic, syntax needed adjustment according to angular docs.

params: {
                    locatieID: {value : "1"},
                    locatieName: {value : "Stad"},
                    locatieDescr: {value : "Beschrijving"},
                    locatieLat: {value: 51.2},
                    locatieLong: {value : 4.4}

Where parameters are passed with ui-href like this

<a ui-sref="locaties.detail({
                locatieDescr: item.description,
                locatieLat: item.location[0].lat,
                locatieLong: item.location[0].long
            class="detail">Bekijk detail >></a>

The 'params' defined should return the key-value pair object.

But it is a better practice if you are passing values from one state to another to use 'data' instead of appending everything in the URL.

The following code should work :

//The following values are default values of the parameters
.state('locaties.detail', {
                params: {
                    locatieID: '1',
                    locatieName: 'Derptown',
                    locatieLat: '50',
                    locatieLong: '50'
                }, ........

This should work. The values expected are of string type and not number.

As far as your LocatieDetailCtrl is concerned, you need to inject what you have in the resolve of the 'locaties.detail' state (i.e. 'locatiedetail'). So your 'LocatieDetailCtrl' should look like following:

  function ($scope, $window, franchisedetail, locatiedetail) {
    $scope.franchiseDetail = franchisedetail; //make sure you have franchiseDetail as well.
    $scope.locatiedetail = locatiedetail; 

I hope that will work.

Need Your Help

Intellij w/ Grails: Cannot resolve symbol for inherited params and methods

grails intellij-idea

Intellij complains about cannot resolve symbol very often when I try to access variables or methods that are inherited in my Grails applications. The apps compile and run fine so there isn't reall...

Linea pro connect issue in iTouch

barcode ipod linea-pro

Hi am working on scanning barcodes through iOS device (iPod touch) using linea pro case.