使用UI将路由器的数据从一个视图传递到另一个路由器

我想弄清楚使用UI路由器将数据从一个控制器传递到另一个控制器的最佳方式。我有两个视图填充了来自两个不同API的数据。视图1包含一个ng-repeater，其中包含来自API端点的餐厅列表（返回名称，图像和ID）。视图2包含来自另一个API端点的餐厅信息（返回说明，菜单和ID）。用户点击View1列表中的一家餐厅，并通过传递餐厅ID，在View 2中打开该餐厅，并带有说明等。问题是视图2中的API端点不包含餐厅名称和图像。因此，为了显示我必须通过他们在这样的链接名称和形象......使用UI将路由器的数据从一个视图传递到另一个路由器

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

然后由控制器handeled视图2这样

(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上面还与视图1控制器共享。我可以通过它吗？

很长一段文章的道歉 - 我想确保我很清楚。谢谢。

来源

2016-09-10 Jose the hose

您是否在View1中列出了酒店的全部细节？我建议你带上meta信息（只需要列出所需的详细信息），然后通过为给定的酒店ID调用api来获取View2中的完整详细信息;只是一个建议。

如果您需要将View1中的全部细节传递给View2，请使用服务来处理此问题;将酒店详细信息分配给服务中的某个对象，并以View2服务访问该对象为单例，您将在View2中获得该详细信息。

来源

2016-09-10 17:44:14 Developer

感谢您的回答。我宁愿不做另一个API调用，因为我想将服务器请求保持在最低限度。如果使用$ stateParams不是这个的最佳选择，我将创建一个服务来共享该对象。 –

@Josethehose - 多个服务器请求（延迟加载）与一次性加载全部细节（贪婪加载）取决于您的业务需求。假设您已经列出了25家酒店，并且您确定用户会查看这些酒店中至少一半的详细信息，然后获取整个详细信息（贪婪加载）是有道理的。但另一方面，如果用户访问酒店的详细信息的机会较低，那么我会进行延迟加载。只是一个想法！ – Developer

酷 - 再次感谢。需要思考的东西 –

使用UI将路由器的数据从一个视图传递到另一个路由器

回答

相关问题