0
我有一個帶有角度密碼驗證腳本的窗體。我試圖讓密碼字段有焦點時出現popover。我希望模板是基於驗證腳本結果進行更改的div。我從來沒有真正使用腳本標籤作爲微模板。使用帶有id的腳本標籤作爲angularstrap彈出窗口模板
我做了一個div(即工作時不是腳本標籤中),看起來像這樣:
<script type="text/html" id="passwordValidate">
<div>
Passwords must meet the following criteria:
<ul class="fa-ul">
<li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.minimum && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.minimum && userForm.password.$dirty)}"></i> At least 8 characters</li>
<li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.lowerCase && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.lowerCase && userForm.password.$dirty)}"></i> At least 1 lower case character</li>
<li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.upperCase && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.upperCase && userForm.password.$dirty)}"></i> At least 1 upper chase character</li>
<li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.number && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.number && userForm.password.$dirty)}"></i> At least 1 number</li>
<li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.symbol && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.symbol && userForm.password.$dirty)}"></i> At least 1 symbol</li>
</ul>
</div>
</script>
和我的密碼字段具有以下標記:
<input
class="form-control input-sm"
ng-model="user.password"
type="password"
name="password"
id="password"
ng-change="passwordValidate()"
placeholder="Password"
data-placement="bottom"
data-trigger="focus"
data-content="test"
data-template="passwordValidate"
bs-popover
required
/>
如果我刪除popover工作的data-template
屬性。如果我離開它,什麼都不會發生(在plnkr)......我得到一個錯誤:
TypeError: cannot call method 'insertBefore' of null
然後:
Uncaught TypeError: Cannot set property 'top' of undefined
這是我應該如何使用模板?
這裏是我的plnkr:http://plnkr.co/edit/j1mrX2RrbDGk6xHSvmXU?p=preview