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;
}