동적으로 앵귤러 바인드 지시자 범위

Question

어떻게하면 새로운 범위를 지시문에 바인딩 할 수 있습니까?

예를 들어 제품 카탈로그가 있으며 제품을 클릭하면 팝업이 표시됩니다. 주요 부분은 내가 숨길 수있는 100 개의 팝업을 만들고 싶지 않으며 model.id와 같은 것으로 열어 본다는 것입니다.

내가 원하는 것은 클릭시 팝업으로 일부 모델을 바인딩하는 것입니다. 제품 엄지.

<li ng-repeat="product in products"> 
    <button ng-click="openPopup(product)"></button> 
</li> 


// Some controller 
... 
$scope.openPopup = function(product) { 
    var popup = angular.element('<popup product="product"></popup>'); 

    // Of course is not working because i want to bind this `product` argument 
    $compile(popup)($scope); 
} 

누군가 어떻게 처리해야 할 수 있습니까? 감사

Answer 1

나는 우리가 한 번에 하나의 팝업을 표시 샘플에서 가정 및 팝업이

템플릿 모달입니다 :

<li ng-repeat="product in products"> 
    <button ng-click="openPopup(product)"></button> 
</li> 

<popup ng-show="showPopup" product="selected_product"></popup> 

컨트롤러 :

$scope.openPopup = function(product) { 
    $scope.selected_product = product; 
    $scope.showPopup = true; 
}