angularjs div anzeigen, wenn in einem Eingabefeld angeklickt und ausgeblendet, wenn außerhalb geklickt wird

Question

Ich möchte mein div anzeigen, wenn der Benutzer in das Eingabefeld klickt, und wenn nur außerhalb geklickt wird, sollte es es ausblenden. Wenn Sie erneut in das Feld klicken, sollte es sich nicht verstecken. Hier ist mein Versuch: 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> 

das Problem ist, dass, wenn die Seite geöffnet wird, ich den Hilfetext zu sehen, und es verschwindet plötzlich und wenn ich in dem Feld klicken, zeigt es wieder, aber Es verschwindet nur, wenn Sie erneut in das Feld klicken. Jetzt möchte ich es nur ausblenden, wenn außerhalb des Feldes geklickt wird. Bitte helfen Sie mir dabei.

Answer 1

Verwendung ng Fokus statt ng Sie auf

Plunker Example

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

Answer 2

unter Code sollte Ihnen helfen.

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