Bootstrap 工具提示 angularjs 不工作

Question

我是 angularjs 的新手。尝试使用 bootstrap 工具提示实现表单验证。如果输入字段无效并获得焦点，将出现带有工具提示的文本。验证工作正常，即如果输入字段具有无效值但未显示工具提示文本，则输入字段变为红色。这里是 html:

<form role="form" name="form" ng-controller="registerController">
        <div class="col-sm-12">
            <div class="form-group" ng-class="{ 'has-error': form.fullName.$invalid && form.fullName.$touched}">
                <input class="form-control has-feedback" name="fullName" id="fullName"
                       type="text"
                       required
                       ng-model="fullName"
                       tooltip="{{form.fullName.$valid ? '' : 'Full name required'}}"
                       tooltip-trigger="focus"
                       tooltip-placement="top" />
                <span class="glyphicon glyphicon-ok-sign text-success form-control-feedback" aria-hidden="true"
                      ng-show="form.fullName.$valid"></span>
            </div>
        </div>
</form>

对于额外的信息，我包含了以下脚本和 css 个文件：

<script src="../scripts/jquery-2.2.1.min.js"></script>  
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../scripts/bootstrap.min.js"></script>
    <script src="../scripts/angular.min.js"></script>
    <script src="../scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

帮我弄清楚如何让它工作。提前致谢。

Answer 1

如果您正在使用 https://angular-ui.github.io/bootstrap/#/tooltip

您的输入字段应如下所示：

<input class="form-control has-feedback" name="fullName" id="fullName"
                   type="text"
                   required
                   ng-model="fullName"
                   uib-tooltip="Full name required"
                   tooltip-is-open="form.fullName.$invalid"
                   tooltip-trigger="none"
                   tooltip-placement="top" />

您想通过将内置触发器设置为 "none" 来删除它，并根据字段的有效性管理打开工具提示。

如果您不打算使用工具提示，并且想要一个不错的动态验证系统，该系统可以针对不同的错误进行扩展和自定义，那么您可以做的比查看 Angular 的消息传递更糟糕：

https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages

这里：

http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

Bootstrap 工具提示 angularjs 不工作

Bootstrap tooltip with angularjs not working

tooltip

angularjs

angular-ui-bootstrap