Question

我有一个显示产品列表的页面。当用户点击产品时，我会在另一个页面中显示产品详细信息。这是我的路由配置的一部分：

  when('/products', {
        templateUrl: 'views/products.html',
        controller: 'ProductListCtrl'
  }).
  when('/products'/:productId', {
         templateUrl: 'views/product-details.html',
         controller: 'ProductDetailsCtrl'
  }).

正如您所看到的，我只能将productId（我使用$routeParams检索）作为参数传递，这意味着我需要进行另一次AJAX调用以获取有关产品的信息。但我已经在products页面上提供了这些数据。

所以我的问题是：我可以将整个Product对象传递给ProductDetailsCtrl而不是仅传递productId吗？

Answer 1

您可以使用产品服务。在ProductListCtrl中，服务将进行http调用并缓存结果。 ProductDetailsCtrl也将使用Product服务。然后，您的服务可以从缓存中返回产品，而不是发出另一个http请求。

Answer 2

是的，您可以使用共享属性服务并在控制器之间传递元素：

.service('sharedProperties', function () {
    var item = null;
    return {
        getItem: function () {
            return item;
        },
        setItem: function(value) {
            item = value;
        }
    }});

然后在转移到控制器之前使用：

sharedProperties.setItem(your-item);

并在加载新控制器后使用：

var model = sharedProperties.getItem();

Answer 3

要将对象实际传递到控制器，您应该使用resolve属性。最后，您将不得不使用您的服务来检索对象。但是，通过不必将对象传递给服务然后再返回控制器，您将获得更松散耦合的解决方案。请考虑以下示例：

 $routeProvider
   .when('/product/:productId', {
   templateUrl: 'product-details.html',
   controller: 'ProductDetailsController',
   resolve: {
      product: productService.getProductById($routeParams.productId);
   }
 });

 productApp.controller("ProductDetailsController", function($scope, product) {
   $scope.product = product;
 });

您可以在angular docs了解更多相关信息。

将对象传递给AngularJS中的控制器

3 个答案: