Visualizza Bootstrap tooltip sulla messa a fuoco quando un ingresso angolare ha un errore

Question

Questo esempio è tratto da angularjs's docs

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

voglio ottenere lo stesso comportamento, ma con un tooltip Bootstrap. Ho esaminato il progetto Angular UI-Bootstraped (http://angular-ui.github.io/bootstrap/) ma non riesco a capire come farlo.

Qualcosa di simile:

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

Answer 1

Ho provato diversi modi, sembra che solo si può modificare il codice sorgente da angolare bootstrap per ottenere una soluzione adeguata. Ma. C'è una soluzione 'hacky', forse ti aiuto o anche questo è quello che avevi bisogno (esempi angolare bootstrap e angolare di ingresso combinato):

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

same in plunker.

fondamentalmente qui basta rimuovere testo dal tooltip e si nasconde.