twitter-bootstrap 当角度输入有错误时,在焦点上显示 Bootstrap 工具提示
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18107986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Bootstrap tooltip on focus when an angular input has an error
提问by Cotten
This example is taken from angularjs's docs
此示例取自angularjs 的文档
<form name="myForm" ng-controller="Ctrl">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>
</form>
I want to achieve the same behavior but with a Bootstrap tooltip. I've looked at the Angular UI-Bootstraped project (http://angular-ui.github.io/bootstrap/) but can't figure out how to do this.
我想实现相同的行为,但使用 Bootstrap 工具提示。我查看了 Angular UI-Bootstraped 项目(http://angular-ui.github.io/bootstrap/),但不知道如何做到这一点。
Something like:
就像是:
<input type="text" value="Click me!"
tooltip="See? Now click away..."
tooltip-trigger="focus"
tooltip-placement="right"
tooltip-enabled="myForm.input.$error.required" <--- pseudo code
/>
回答by Rasalom
I've tried several ways, looks like you only can modify source code from angular-bootstrap to get a proper solution. But. There is a 'hacky' solution, maybe it'll help you or even that's what you needed(examples from angular-bootstrap and angular-input combined):
我尝试了几种方法,看起来您只能从 angular-bootstrap 修改源代码以获得正确的解决方案。但。有一个 'hacky' 解决方案,也许它会帮助你,甚至这就是你所需要的(来自 angular-bootstrap 和 angular-input 的例子):
<form name="myForm" class="my-form">
userType: <input style="width: 50px;" name="input" ng-model="userType" required value="Click me!" tooltip="{{myForm.$valid ? '' : 'See? Now click away...'}}" tooltip-trigger="focus" tooltip-placement="right" class="form-control">
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<tt>userType = {{userType}}</tt><br>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
</form>
basically here you just remove text from tooltip and it hides.
基本上在这里您只需从工具提示中删除文本并将其隐藏。

