Angular Bind指令范圍動態

Question

如何將新范圍綁定到指令？

例如，我們有產品目錄，如果您單擊產品，將顯示彈出窗口。 主要部分是我不想創建將要被諸如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;
}