2013-08-07 8 views
7

Ten przykład pochodzi z angularjs's docsPokaż Bootstrap etykietka na ostrości, gdy wejście kątowa ma błędu

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

chcę osiągnąć ten sam problem, ale z podpowiedzi startowej. Przyjrzałem się projektowi Angular UI-Bootstraped (http://angular-ui.github.io/bootstrap/), ale nie mogę się dowiedzieć, jak to zrobić.

Coś jak:

<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

Sprawdź, czy to pomaga: "[Włącz etykietę-ui dla niestandardowych zdarzeń] (http://stackoverflow.com/questions/16651227/enable-angular-ui-tooltip-on-custom-events/16653079#16653079) ". – Stewie

Odpowiedz

1

Próbowałem kilka sposobów, wygląda jak tylko może modyfikować kod źródłowy z kątowym-bootstrap, aby uzyskać właściwe rozwiązanie. Ale. Istnieje rozwiązanie „hacky”, może to pomoże, a nawet to, co potrzebne (przykłady z kątowym-bootstrap i kątowego-input połączeniu):

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

zasadzie tutaj po prostu usunąć tekst z tooltipu i ukrywa się.

+0

Prawidłowa odpowiedź. Jest to wyjątkowo sprytne. Tylko hack :-) Dzięki! –