Angular bind directive scope dynamically

Question

How can i bind new scope to the directive?

For exmaple we have product catalog and if you click the product - popup will be shown. The main part is that i don't want to create 100 popups that will be hidden, and open the, by something like model.id

All i want to do is to bind some model to the popup on click on the product thumb.

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

Could someone tell me how to deal with it? Thanks

Use $index This might be of help thinkster.io/angularjs/3yYACcwytA/angularjs-index-event-log — Vikram Tiwari
– Vikram Tiwari, Commented Jul 10, 2014 at 15:03
Once you've compiled and linked your popup, you just need to add it to the DOM. i.e. element.append(popup) — Michael Kang
– Michael Kang, Commented Jul 10, 2014 at 15:06
The problem is compiling. I can't compile it with other scope.. — user2573863
– user2573863, Commented Jul 10, 2014 at 15:15

vaneri2007 · Accepted Answer · 2014-07-10 15:34:18Z

1

I suppose in the sample that we only display one popup at a time and that the popup is modal

Template:

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

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

Controller:

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

answered Jul 10, 2014 at 15:34

vaneri2007

443 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular bind directive scope dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related