Angular UI Router загружен, но не передает параметры

Question

Angular UI Router загружен, но не передает параметры

0

Я работаю над сайтом с угловым ui-router. Существует страница, которая должна передать некоторые параметры другому виду. Я определил свои состояния следующим образом:

.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;
                            });
                        }
                }
            })

Внутри LocatieDetailCtrl есть это

angular.module('PremiumMeat').controller('FranchisesDetailCtrl', 
  function ($scope, $window, franchisedetail) {
    $scope.franchiseDetail = franchisedetail;
  });

Представление "Locaties" (множественное число) работает правильно, и когда я нажимаю на определенную "локацию" (одиночную), URL-адрес изменяется, и представление загружается в представление локалей и параметры не передаются. На изображении вы можете увидеть 2 верхних пункта из окна "Locaties". Затем в окне "Locaties" загружается одна локализация. Это должна быть новая страница (представление) с параметрами из щелкнутой локации. Может ли кто-нибудь помочь мне/объяснить, я довольно новичок в угловой, спасибо.

RobSeg 25 июнь 2015, в 14:57

Источник

Теги:

angularjs

angular-ui-router

2 ответа

Ещё вопросы

Vaibhav Pachauri · Answer 1 · 2015-06-25T13-42-00.000Z

Определяемые "params" должны возвращать объект пары "ключ-значение".

Но лучше использовать, если вы передаете значения из одного состояния в другое, чтобы использовать "данные" вместо добавления всего в URL.

Следующий код должен работать:

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

Это должно сработать. Ожидаемые значения имеют тип строки, а не число.

Что касается вашего LocatieDetailCtrl, вам нужно ввести то, что у вас есть в разрешении состояния locaties.detail (т.е. "locatiedetail"). Поэтому ваш "LocatieDetailCtrl" должен выглядеть следующим образом:

angular.module('PremiumMeat').controller('FranchisesDetailCtrl', 
  function ($scope, $window, franchisedetail, locatiedetail) {
    $scope.franchiseDetail = franchisedetail; //make sure you have franchiseDetail as well.
    $scope.locatiedetail = locatiedetail; 
  });

Надеюсь, что это сработает.

RobSeg · Answer 2 · 2015-06-25T13-10-00.000Z

Решение

Параметры, которые жестко закодированы, чтобы сделать их динамическими, синтаксис нуждался в настройке в соответствии с угловыми документами.

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

Где параметры передаются с помощью ui-href, как это

<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>