Angular UI Bootstrap not working with AngularJS event handling

Question

I am new to Angular and have basic problems, getting Angular-UI-Bootstrap to work in combination with AngularJS. Here a simple example, an usual input field that uses ng-change for event handling, and which has a popover. Without the popover attributes, the codes works fine. When the popover attributes are added, the popover is displayed correctly, and looks fine, but the event handler is not called, and also the password model not updated, when the value of the input field changes.

Same problem holds e.g. if I have a button with event handling code and a popover. Same problem also if I do not use popover, but tooltip.

<input type="password" ng-model="password" placeholder="New Password"
ng-change="onPasswordChanged()" popover="I am a popover!" 
popover-trigger="mouseenter" />

I am using ui-bootstrap-tpls-0.3.0.js and AngularJS v1.0.7.

Does someone know what the problem is?

Community · Accepted Answer · 2017-05-23 12:00:02Z

2

Popover directive creates a child scope, so when you bind your model to a primitive, the binding will stay inside that scope (it will not propagate upwards). See "What are the nuances of scope prototypal / prototypical inheritance in AngularJS?" for more info on inheritance.

Workaround is to use a dot notation when referencing your models:

<input type="password" ng-model="data.password" popover="I am a popover!" 
popover-trigger="mouseenter" />

DEMO PLUNKER

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Jun 24, 2013 at 8:45

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

2 Comments

OliverM Over a year ago

Thanks, works for me! From a newbie perspective, this looks to me like an odd and unintuitive restriction though.

Stewie Over a year ago

I know what you're saying. Just try to always reference your models through dot notation and you'll save yourself from lot of headache.

Collectives™ on Stack Overflow

Angular UI Bootstrap not working with AngularJS event handling

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related