0

angular のパスワード検証スクリプトを含むフォームがあります。パスワード フィールドにフォーカスがあるときにポップオーバーを表示しようとしています。テンプレートは、検証スクリプトの結果に基づいて変化する div にしたいと考えています。これまでスクリプト タグをマイクロテンプレートとして実際に使用したことはありません。

次のような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
     />

属性を削除する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

4

1 に答える 1