AngularJS에서 컨트롤러에 객체 전달

Question

제품 목록을 표시하는 페이지가 있습니다. 사용자가 제품을 클릭하면 다른 페이지에 제품 세부 정보가 표시됩니다. 이것은 내 라우팅 구성의 일부입니다

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

당신이 난 단지 내가 제품에 대한 정보를 얻을 수있는 또 다른 AJAX 호출을 만들 필요가 의미 매개 변수로 (내가 $routeParams를 사용하여 조회하는있는) productId를 전달할 수 있습니다 볼 수 있듯이. 하지만이 데이터는 이미 products 페이지에 있습니다.

제 질문은 : Product 개체를 productId 대신에 ProductDetailsCtrl으로 전달할 수 있습니까?

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 p 로퍼 티. 결국 서비스를 사용하여 개체를 검색해야합니다. 그러나 객체를 서비스에 전달하지 않고 컨트롤러로 다시 보내지 않아도 느슨하게 결합 된 솔루션을 얻을 수 있습니다. 다음 예제를 고려하십시오.

$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에서 자세한 내용을 볼 수 있습니다.