angularjs divを表示して入力フィールド内をクリックし、非表示にすると非表示にする

Question

ユーザーが入力フィールド内をクリックするとdivを表示し、外側をクリックすると非表示にします。フィールド内を再度クリックすると、そのフィールドは非表示にならないはずです。 ここに私の試みです： JSFIDDLE LINK

<div ng-app="app"> 
<div ng-controller="HelpCtrl"> 
    <input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp"> 

    <div class="details" ng-class="{ 'hidden': ! showHelp }"> 
    <p> 
    The help text here! 
    </p> 
    </div> 
</div> 
</div> 

、問題がページを開いたとき、私はヘルプテキストを参照してくださいということであり、それが突然消え、私は、フィールド内をクリックしたときに、それが再び表示されますが、再度フィールド内をクリックすると消えます。今私はそれがフィールドの外でクリックされた場合にのみ非表示にします。 これを手伝ってください。

Answer 1

使用NG-焦点代わりの良い

Plunker Example

<input type="text" ng-focus="focused = true" ng-blur="focused = false" /> 
<p ng-if="focused">Input has focus!</p> 

Answer 2

以下のコードを参考にしてください。

<style> 

.hidden{ 
-webkit-transition: width 2s; transition: width 2s; 
display:none !important;; 

} 
.details{ 
display:block; 
} 
</style> 
    <div ng-app="app"> 
    <div ng-controller="HelpCtrl"> 
       <input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false"> 

    <div class="details" ng-class="{'hidden':!showHelp}"> 
    <p> 
    The help text here! 
    </p> 
    </div> 
     </div> 
    </div>