Question

我正在使用角度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”（复数）视图正常工作，当我点击特定的“locatie”（单个）时，url会更改并且视图会在locaties视图中加载，并且不会传递任何参数。在图像上，您可以看到“locaties”视图中的前2项。然后在“locaties”视图下加载单个locatie。这应该是一个新页面（视图），其中包含点击的locatie中的参数。任何人都可以帮助我/解释，我对角度很新，谢谢。

views

Answer 1

<强>解决方案

硬编码的参数，使其动态化，语法需要根据angular docs进行调整。

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>

Answer 2

定义的'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; 
  });

我希望这会奏效。

Angular ui路由器视图已加载但未传递参数

2 个答案: