Я работаю над сайтом с угловым 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" загружается одна локализация. Это должна быть новая страница (представление) с параметрами из щелкнутой локации. Может ли кто-нибудь помочь мне/объяснить, я довольно новичок в угловой, спасибо.
Определяемые "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;
});
Надеюсь, что это сработает.
Решение
Параметры, которые жестко закодированы, чтобы сделать их динамическими, синтаксис нуждался в настройке в соответствии с угловыми документами.
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>