2014-01-29 59 views
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

回答

相關問題