Angular 1.5 Binding ng-repeat created controls?

Question

Angular 1.5

In an ng-repeat I create a button that will display a Bootstrap popup with anchor links.

How do I bind the onAction call so that it calls my $scope.onAction() function ? (onAction() is not bound to $scope.onAction().)

<div ng-repeat="item in model.Holdings  track by $index" bs-popover>

  <button class="popoverBtn" 
        data-content="<a ng-click='onAction(1)'>Buy</a>...and more"
          click me to show popup
  </button>

</div>

Here's my directive that turns the Bootstrap popover on:

app.directive('bsPopover', function () {
    return function (scope, element, attrs) {
        element.find(".popoverBtn").popover({ placement: 'auto', html: 'true' });

    ????COMPILE GOES HERE???////
    };
});

Paurian · Answer 1 · 2017-03-06T20:07:58.303

0

It sounds like you want the onAction method to take an item identifier.

Perhaps something like <a ng-click='onAction(item.id)'>Buy</a> ??

From what I recall, you are in the scope of the controller that stores the data. If you have nested ng-repeats, look into $parent.

edited Mar 06 '17 at 20:07

answered Mar 06 '17 at 20:04

Paurian

1,372
10
18

Sorry, no, the problem is that onAction() is never called. It's not bound to the $scope – Ian Vink Mar 06 '17 at 20:07
Mind posting a little more - perhaps include the tag where you use ngController? (E.G. if you are doing a "Controller As" then you need to identify that specific controller on the action like "model.onAction(1)") – Paurian Mar 06 '17 at 20:09
Oh - Wait a minute ... Are you trying to create page with a button such that when you click the button, it pops up a bootstrap div, such that within that div it contains an anchor the user could click on to trigger the onAction angular method? There's something similar to this request here: http://stackoverflow.com/questions/16722424/how-do-i-create-an-angularjs-ui-bootstrap-popover-with-html-content – Paurian Mar 06 '17 at 20:20

score 0 · Answer 2 · answered Mar 06 '17 at 20:15

0

If you are looking to pass the index value of an item into your function on a click event, you need only pass it $index instead of an explicit value. For example:

<div ng-repeat="item in model.Holdings track by $index">
  <button class="btn btn-primary" 
        data-content="<a ng-click='onAction($index)'>Buy</a>...and more">
    click me to show popup
  </button>
</div>

answered Mar 06 '17 at 20:15

Bobby Nichols

128
1
3
9

The problem isn't passing$index data, it's that the onAction() doesn't get called. Once open, I need to $compile the dynamically generated Bootstrap popup, – Ian Vink Mar 06 '17 at 20:27

score 0 · Answer 3 · answered Mar 06 '17 at 21:42

0

UI-Bootstrap project seems to have simple to use controls for Angular + Bootstrap.

https://angular-ui.github.io/bootstrap/

This worked

answered Mar 06 '17 at 21:42

Ian Vink

66,960
104
341
555

Angular 1.5 Binding ng-repeat created controls?

3 Answers3