how to implement click away feature with ng-show and ng-hide

Question

Is there any solution that can implement the click away feature with ng-show?

Here is the plunker: http://jsfiddle.net/o0dwsrqf/

I'm using the button to show the text.

<button ng-click="test=!test">test</button>

And I'm using ng-show to show the text:

<ul ng-show="test">

And when I click away from the text I want to hide it. Is there anyway I can achieve this?

EDIT:

Defining click away I mean click anywhere else besides button and text area. When I click away I want to hide the text.

By `click away from the text ` you mean click anywhere else except the button? — Dmitry Sadakov, Aug 07 '15 at 23:43
@cDima I mean anywhere else except the button and text area, which is inside — Gabriel, Aug 07 '15 at 23:44
Check out http://stackoverflow.com/questions/21385614/angular-js-closing-with-click-anywhere-but-on-the-element — Itamar L., Aug 08 '15 at 01:06
@ItamarL. The solution works in a more hacked way. But it works with angular. — Gabriel, Aug 10 '15 at 17:03

score 1 · Accepted Answer · answered Aug 08 '15 at 01:45

1

You need to use event propagation to do this. Attach a click event to the body tag or some other element that covers the entire page and then attach click events to the button and text area. The button should toggle test and swallow the event (e.stopPropagation()) and the textarea should get focus then swallow the event.

answered Aug 08 '15 at 01:45

tuckerjt07

902
1
12
31

This is a solution depends on jquery. Is there anyway I can use angular to implement this? – Gabriel Aug 10 '15 at 17:04
How does it depend on jQuery? – tuckerjt07 Aug 10 '15 at 17:06
by attaching a click event to body tag do you mean using jquery to attach? – Gabriel Aug 10 '15 at 17:11
No, by using a directive and binding the click event to the element in the directive – tuckerjt07 Aug 10 '15 at 17:14

how to implement click away feature with ng-show and ng-hide

1 Answers1