带有angularjs的引导工具提示不起作用答案

【问题标题】：Bootstrap tooltip with angularjs not working带有angularjs的引导工具提示不起作用
【发布时间】：2016-03-12 06:04:12
【问题描述】：

我是 angularjs 的新手。尝试使用引导工具提示实现表单验证。如果输入字段无效并获得焦点，则会出现带有工具提示的文本。验证工作正常，即如果输入字段具有无效值但未显示工具提示文本，则输入字段将变为红色。这是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>

帮助我弄清楚如何让它发挥作用。提前致谢。

【问题讨论】：

你是否在你的应用程序中注入 'ui.bootstrap' 依赖项？
是的，我已经注入了 'ui.bootstrap' 依赖项。

标签： angularjs tooltip angular-ui-bootstrap

【解决方案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" />

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

如果您不打算使用工具提示，并且想要一个可扩展并可针对不同错误进行自定义的动态验证系统，那么您可以比看看 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

【讨论】：