Question

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

Answer 1

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

（另外，还要确保使用bootstrap标记为popovers）

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

使用id为angularstrap popover模板的脚本标记

1 个答案: