0

我有一个带有角度密码验证脚本的表单。当密码字段具有焦点时，我试图让弹出框出现。我希望模板是一个 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

0

我最终将 HTML 放在一个实际的单独文件中，并将其作为模板引用。它工作并且保持本地范围，所以我的验证器工作。

（另外，必须确保对弹出窗口使用引导标记）

这是固定的 plnkr：http ://plnkr.co/edit/j1mrX2RrbDGk6xHSvmXU?p=preview

于 2014-01-29T18:52:18.577 回答