iamadamjowett / angular-click-outside Goto Github PK

I use click outside to persist one form, but problem is if user is in input field and click on any kind or navigation link in my app which redirects page to other URL the attached function to click outside on that input is never entered.

As the title.
So i add a condition to check if click itself.

if (elem[0] === e.target || elem.find(e.target).length > 0) {
  return;
}

id

Latest version on npm is 1.1.1.

Is the current implementation intended to handle touch events on mobile devices?

No tests is a warning flag for me. Would you be open to adding some tests?

Let me know, thanks!

L54:
if ((id !== undefined && id === classList[i]) || (classNames && classNames === classList[i])) { // now let's exit out as it is an element that has been defined as being ignored for clicking outside return; }

ClassNames is a string with all the classes of an element while classList represents only the class you want to exclude. First you have to split classNames :
classNames.split(' ')

And after you have to compare each element of classList with each element of this new list.

Example:

var listClassNames = classNames.split(' '); for(var j = 0; j< listClassNames.length; j++){ if(classList[i] === listClassNames[j]){ return; } }

Can't apply on element that already asks for isolated scope.
Functions can be extracted with $parse. See http://luxiyalu.com/angular-directive-click-elsewhere/

Hi there,

I'm facing a trouble,

Just imagine a facebook notification application, people click on a the bell and we have the notifications in a div that we can scroll.

When i click outside. OK.
When i scroll inside the div. OK
When i scroll and finish the scroll outside the div it trigger a click outside. So how to prevent this one ?

Thank's for all,

Jérémy

Hi,

Do you know if this can work with a SELECT and its options.

I am using the ng-options to fill the contents.

I would like to get some kind of visual feedback and expand / collapse. Actually, expand isn't needed as i can use a click of the button above. BUT collapse is, currently i have been able to use ng-blur but you have to completely click off the element for it to be called.

Is this something that is supported ?

I did check the issues here to see if anyone else was trying to achieve the same thing but couldn't find anything

Thanks

<div class="c-checkbox">
    <input type="checkbox" class="c-checkbox__input" id="photoLayoutyCheckbox" name="photoLayoutyCheckbox"/>
    <label for="photoLayoutyCheckbox" class="c-checkbox__label">PhotoLayout</label>
</div>

this simple layout doesn't work (label doesn't toogle checkbox) if your module included in angular app

When I update the plugin to a version > 2.2.1, the outside-if-not attribute stopped working. Small code snippet:

<div  data-click-outside="deselectFormElement()" 
data-outside-if-not="editor__sidebar,option__button">

Downgrading to version 2.2.1 fixes the issue. Could you please fix it in a new version?

Please consider adding unit tests/e2e tests to prevent regressions. Other than that, I really appreciate your plugin!

<div id="J_div"></div>
<div id="J_div_1"></div>
<div id="J_div_2"></div>
(id !== undefined && id.indexOf(classList[i]) > -1) || (classNames && classNames.indexOf(classList[i]) > -1)

Fix
(id !== undefined && id === classList[i]) || (classNames && classNames === classList[i])

Could you please publish your module to NPM registry for npm/webpack users? I'm not using bower.

Hi,
When I click inside the dropdown menu that has the click-outside directive, it closes the menu, and also, any links that are in that dropdown don't work (neither with href or ui-sref). Actually the click I execute on an inside the dropdown, gets executed on whatever is under that menu.... strange behaviour

Thanks

Using this directive, if you have an input of type file on your document, the file browser won't open.
As a workaround, I added the following lines in the beginning of the eventHandler function (it can be improved) :
if(e.target.type === "file") { return; }

Hi – as far as I can see I've set it up fine, and things are logged when I 'click outside' but it doesn't seem to be affecting the original scope at all. Any thoughts?

Here is a pull out of my code, hope it makes sense – http://jsbin.com/dowijacati/2/edit?html,js,output

If you put click-outside on something that (for example) opens a dropdown, and that dropdown contains links with hrefs, those hrefs don't navigate (unless they only change the hash). E.g.

<li id="something-in-menu" click-outside="showDropdown = false">
  <a href="#" ng-click="showDropdown = true">Click here</a>
  <div ng-show="showDropdown">
    <ul id="submenu">
      <li><a href="/this/link/no/worky">Doesn't work</a></li>
      <li><a href="/blah#!/this/does">But only if you're already on /blah#!</a></li>
    </ul>
  </div>
</li>

There is error (or warning) when you install from bower:

bower angular-click-outside#*     invalid-meta The "description" is too long, the limit is 140 characters

and the length is 149 characters.

Version 1.1.0
I'm using this version because its much faster then over releases.

You should add to the ReadMe that the values that are comma separated cannot contain any spaces. I didn't realize that you weren't doing a trim on the directives and spent hours just realized that the spaces were be added to the class names, which of course won't work.

Works prefect but not iPad safari. Obviously it not recognizes the $document.on('click') event. My solution was detect it iPad then 'touchstart'. As below:

var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
$document.on(event, eventHandler);

the 1.1.5 version has some dependencies your missing something

Is it possible to use 'outside-if-not' with more complex class selectors like:
".outerclass .innerclass"?
Can't get this to work.
Thanks!

Hello;
Thanks a lot for sharing the module.

I've just noticed that the version installed by default by bower has a different module name. Would it be possible to release the updated version?

Awesome directive! It was exactly what I was looking for.

I noticed that it won't work properly unless you assign an id to the element. Is there a reason you made this a requirement? Any way to remove this restriction.

Cheers

Your "click outside" directive is in fact "click anywhere", which is not accurate and not expected, I think.

Take a look at this code http://plnkr.co/edit/IXdI1XZTAiOFgRHB47mc?p=preview
I'm trying to add handler for when it's clicked outside, but it always works.

The only way to achieve expected behavior is to add stopPropagation with ng-click: http://plnkr.co/edit/Sq7i1v4ZoCXuhTQsZdXt?p=preview

The events listner is registerd with:

$document.on('click.outsideDirective', function() {/**/})

the click event is ignored in case when we use angular without jquery.

Could you please commit to master branch only stable versions.
Could you do not change module name.

The readme file said - add 'angular-click-outside' module, which not work.

instead, the updated readme file after install it and watch in the node_modules, said to include the work module name - 'tw.directives.clickOutside'

please update this for not confuse some people.
tnx

Hi nice plugin but I haven't been very lucky implementing it (yet)! I included the directive as described but it's not working on my code for some reason:

My code: https://gist.github.com/tobiasbueschel/ed257bb37d16bc85cacb

any ideas?

Hello,

I don't know if this was intended, but for me is perfect. outside-if-not worksp with classes as it works with IDs. It's a very great feature, because all my buttons has the class btn. I just tried and it worked, but there is nothing on the documentation that teaches about this.

Regards

There an delay about 1 or 2 seconds on big project then clicking no mater where. Looks like its freeze on click.
Please review and optimize your script.

When I use the plugin, it logs some tests results in the console:

passed the hide test
passed the event check
about to check
about to check

Is it normal? How can I disable this behaviour?
Thanks, and very useful package by the way!

Awesome directive, I appreciate you putting this together. It works great, however i'm having one small issue with it. I'm using this on a "fake" dropdown ( aka a styled div that drops down with selectable options). Using this directive, the div closes if you click outside unless the clicks are within an ngDialog modal. (outside-if-not="ngdialog1, ngdialog-overlay, ngdialog-close, form-buttons, form-actions, input")

My issue is.. This works on the initial ngDialog modal open, however if you close the modal then open it again, any clicks inside of the modal will close the dropdown. Its as if the "outside-if-not" directive is not being respected.

trying to build this module with npm and webpack

import '@iamadamjowett/angular-click-outside';

and getting error:

Module not found: Error: Cannot resolve module '@iamadamjowett/angular-click-outside'

Is there any examples using this code with ES6.

I just use this library and it is working correctly with me.
My question here is:
if I have a side bar menu and I want to close it if I click any link inside the side bar (not outside) how can I implement something like this?

I have a popup with a click-outside callback like this.

<popup click-outside="closePopup()"></popup>

It works fine in almost all cases, until I click an element that has bootstraps data-toggle="dropdown" on it. Like this.

<button data-toggle="dropdown"></button>

Any ideas would be helpful