4

I'd like to use a Bootstrap popover (from Angular-Bootstrap) to modify a model value on the $scope of a controller. It seems that the popover template is breaking some connection.

I made a small example to show my issue:

Directive 1 (master-directive) takes in the model as an isolate scope property. It's template is a button that displays a popover. The template for the popover shows directive 2 (sub-directive) which is fed the model value through an isolate scope property, and would contain some sort of UI control to modify that property (in the demo, this is just a mouse click).

Normally the changes would propagate back up to the controller (sub-directive model is two-way bound to the master-directive model which is then two-way bound to the controller model. However, when the template that contains sub-directive is used in the popover, the two-way binding between sub-directive and master-directive is broken. Any changes to the model in sub-directive will stay local to that directive, and are not propagated upwards.

Relevant Plunkr: http://plnkr.co/edit/3ZnmNUtajXsAHJjCdkkJ?p=preview

Here is the same Plunkr without the popover, demonstrating that it works: http://plnkr.co/edit/Mr4djvZCVpEUkgDZpyvV?p=preview

Is there a step I am missing to bridge the gaps that are introduced with the popover module?

Mike
  • 4,071
  • 21
  • 36
  • Any reason for the downvote...? Or are you just scanning for no code samples and downvoting whenever you can't see the obvious Plunkr links. – Mike Jul 14 '15 at 00:43

1 Answers1

3

If you store you data in an object, rather than a Javascript primitive (number), the problem is resolved. Plunkr.

Store your data in an object like this:

$scope.data = { num: 5 };

Instead of this:

$scope.num = 5;

My assumption is that the popover is creating a child scope. B/c of the way prototypical inheritance works, the number property in the child scope shadows the number property in the parent (eg. the parent's value doesn't change when the child's does).

Community
  • 1
  • 1
Sunil D.
  • 17,983
  • 6
  • 53
  • 65