2013-08-07 15 views
7

この例があり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> 

私は同じ動作を達成したいからではなく、ブートストラップツールチップで撮影しています。私は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

これが役立つかどうかを確認してください:「[カスタムイベントで角度ツールチップを有効にする](http://stackoverflow.com/questions/16651227/enable-angular-ui-tooltip-on-custom-events/16653079#16653079) " – Stewie

答えて

1

は、見えます。しかし。 「ハック」ソリューションがありますが、多分それはあなたを助けるでしょうかさえ、それはあなたが(組み合わせアンギュラ-ブートストラップおよび角度の入力からの例)必要なものです:基本的に、ここであなただけの削除

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

をツールチップのテキストを非表示にします。

+0

正解です。これは例外的に巧妙です。ちょっとハック:-)ありがとう! –

関連する問題