Passing a model value through a popover in AngularJS [duplicate]

Question

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?

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
– Mike, Commented Jul 14, 2015 at 0:43

Community · Accepted Answer · 2017-05-23 10:32:40Z

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).

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 14, 2015 at 1:04

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Passing a model value through a popover in AngularJS [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related