Angular UI Bootstrap не работает с обработкой событий AngularJS

Я новичок в Angular, и у меня есть основные проблемы, связанные с работой Angular-UI-Bootstrap в сочетании с AngularJS. Вот простой пример, обычное поле ввода, которое использует ng-change для обработки событий и имеет всплывающее окно. Коды без всплывающих окон работают нормально. При добавлении атрибутов поповера поповер отображается корректно и выглядит нормально, но обработчик события не вызывается, а также не обновляется модель пароля при изменении значения поля ввода.

Та же проблема имеет место, например. если у меня есть кнопка с кодом обработки событий и всплывающим окном. Та же проблема, если я использую не всплывающую подсказку, а всплывающую подсказку.

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

Я использую ui-bootstrap-tpls-0.3.0.js и AngularJS v1.0.7.

Кто-нибудь знает, в чем проблема?


angularjs angular-ui-bootstrap angular-ui
person OliverM    schedule 24.06.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Директива Popover создает дочернюю область, поэтому, когда вы привязываете свою модель к примитиву, привязка останется внутри этой области (она не будет распространяться вверх). См. "Каковы нюансы области прототипа/ прототипное наследование в AngularJS?" для получения дополнительной информации о наследовании.

Обходной путь — использовать точечную нотацию при ссылке на ваши модели:

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

ДЕМО-ПЛАНКЕР

person Stewie    schedule 24.06.2013
comment
Спасибо, работает для меня! Однако с точки зрения новичка это выглядит странным и неинтуитивным ограничением. - person OliverM; 24.06.2013
comment
Я знаю, что ты говоришь. Просто старайтесь всегда ссылаться на свои модели через точечную нотацию, и вы избавите себя от головной боли. - person Stewie; 24.06.2013