0

I've written a custom directive for searching profiles, which consists of:

A title div:

<div>Search Profiles</div>

An input textbox for typing the search words 

<div><input /></div>

The result items div: 

<div>
    <div ng-repeat="foundUser in foundUsers">
        <img ... />
        <div>{{foundUser.FullName}}</div>
        <button>Invite</button>
    </div>
</div>

I need the drv to be opened like a dropdown on clicking an image.

<img class="dropdown-toggle" src="/Images/Icons/OpenSearchProfilesIcon.png"
     data-toggle="dropdown" />
<search-profiles class="dropdown-menu"></search-profiles>

Thus the directive really opens up on clicking the img and closes when clicking elsewhere in the document, as expected.

The Problem

The drv is also closed when clicking the input textbox in order to type in the search-word, as well as when clicking the title div, as well as when clicking the invite button, BUT ALL those kinds of clicks shouldn't actually cause the drv to be closed.

The clicks that do should close it are clicking on everything that is beyond the div of the custom directive.

Any ideas how should I do that without involving listeners for $document clicks and deciding whether the click was outside the drv, staying with pure bs?

In addition, if I like drv to be closed also on clicking the invite button, but not on clicking the title and the input textbox - how should it be done?

Thanks

Shimon Topach
  • 141
  • 10

1 Answers1

0

Ok, got it.

<search-profiles ng-click="onSearchProfilesClick($event)" class="dropdown-menu">                                                                               
</search-profiles>

and in the controller:

scope.onSearchProfilesClick = function ($event) {
    $event.stopPropagation();
}
Shimon Topach
  • 141
  • 10