Question

我正在尝试找出使用UI路由器将数据从一个控制器传递到另一个控制器的最佳方法。我有两个填充了来自两个不同API的数据的视图。视图1包含一个ng-repeater，其中包含API端点中的餐馆列表（返回名称，图像和ID）。视图2包含来自另一个API端点的餐馆信息（返回描述，菜单和ID）。用户点击View1列表中的餐馆，然后通过传递餐馆ID在View 2中打开该餐馆的描述等。问题是View 2中的API端点不包含餐馆名称和图像。所以为了显示名称和图像，我必须在链接中传递它们......

<a ui-sref="restaurantProfile({id: restaurant.Id, name: restaurant.Name, image: restaurant.Logo[0].StandardResolutionURL})">{{restaurant.Name}}</a>

然后由View控制器对此进行操作

(function() {
'use strict';

angular.module('components.restaurantProfile', [])
    .controller('RestaurantProfileController', function(resolvedRestaurantId, Restaurants, $stateParams) {
        var vm = this;

        vm.name =  $stateParams.name;
        vm.image = $stateParams.image;

        Restaurants.findByRestaurantId(resolvedRestaurantId)
            .then(function(result) {
                vm.restaurant = result
            })
    })
    .config(function($stateProvider) {
        $stateProvider
            .state('restaurantProfile', {
                url: '/restaurant/:id',
                templateUrl: 'components/restaurant-profile/View2.html',
                controller: 'RestaurantProfileController as pc',
                params: {
                    name: '',
                    image: ''
                },
                resolve: {
                    resolvedRestaurantId: function($stateParams) {
                        return $stateParams.id;
                    }
                }
            });
    });
})();

这很有效，但感觉不对。特别是如果我需要传递更多参数，ui-sref链接将变得非常长。有没有更好的方法将名称/图像从View1中选定的餐厅传递给View2？是否可以将选定的餐厅对象从转发器传递到另一个视图？

，如果有帮助，注入上面Restaurants的名为RestaurantProfileController的服务也会与View1控制器共享。我可以把它传递过那里吗？

长篇大论道歉 - 我想确保我很清楚。感谢。

Answer 1

在View1中列出时，您是否填写了酒店的所有详细信息？我建议你带上元细节（只需要列出所需的详细信息），并通过调用给定酒店ID的api获取View2中的完整详细信息;只是一个建议。

如果您需要将整个详细信息从View1传递到View2，请使用服务来处理此问题;将酒店详细信息分配给您服务中的对象，并在View2-Service为单例中访问该对象，您将在View2中获取该详细信息

使用UI-Router将数据从一个视图传递到另一个视图

1 个答案: