8

这个例子取自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>

我想实现相同的行为，但使用 Bootstrap 工具提示。我查看了 Angular UI-Bootstraped 项目（http://angular-ui.github.io/bootstrap/），但不知道如何做到这一点。

就像是：

<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
    />
4

1 回答 1

1

我尝试了几种方法，看起来您只能从 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>

在 plunker 中也一样。

基本上在这里，您只需从工具提示中删除文本，它就会隐藏起来。

于 2014-10-15T14:40:28.807 回答