Angular UI Bootstrap不能與AngularJS事件處理一起工作

Question

我是Angular的新手，有基本的問題，Angular-UI-Bootstrap與AngularJS結合使用。這裏有一個簡單的例子，一個使用ng-change進行事件處理的普通輸入字段，它有一個彈出窗口。沒有popover屬性，代碼工作正常。添加彈出式屬性時，彈出窗口顯示正確，並且看起來不錯，但事件處理程序未被調用，並且輸入字段的值更改時密碼模型未更新。

同樣的問題存在例如如果我有一個帶有事件處理代碼和彈出窗口的按鈕。同樣的問題，如果我不使用popover，但工具提示。

<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。

有人知道問題是什麼嗎？

Answer 1

Popover指令創建一個子範圍，所以當你將你的模型綁定到一個基元時，綁定將停留在該範圍內（它不會向上傳播）。有關繼承的更多信息，請參閱「What are the nuances of scope prototypal/prototypical inheritance in AngularJS?」。

解決方法是參考你的模型時，使用點符號：

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

DEMO PLUNKER