How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

Question

I am using the Angular-Bootstrap Dropdown. I want to prevent it from closing on click until the user closes it intentionally.

Default state is: The Dropdown closes when clicking somewhere in the Document.

I identified the relevant lines of code: (Line 12, dropdown.js)

this.open = function( dropdownScope ) {
   if ( !openScope ) {
     $document.bind('click', closeDropdown); // line to unbind
     $document.bind('keydown', escapeKeyBind);
   }
}

You can find the full code here: Link to Github

I don't want to change the original sources of angular-bootstrap to keep my project open for updates.

My question:

How can i unbind an event bound by a Directive to the document in an Angular Controller?

score 148 · Answer 1 · answered Aug 08 '14 at 13:40

148

I solved this by adding the following to my drop down-menu. This prevents the drop down from closing unless you click on the tag that opens it

<ul class="dropdown-menu" ng-click="$event.stopPropagation()">

answered Aug 08 '14 at 13:40

Dane

1,501
1
10
4

Thanks! You made my day! I would like to understand if this behavior is by design, and which logic does this follow... – MarcoS Aug 31 '14 at 15:27
this prevents any ajax request if there is a button inside that triggers the ajax event .. – Aysennoussi Sep 26 '14 at 16:41
I wish I had found this a while ago. I had to use directive with setTimeOut function just to achieve this. Even then the checkbox wasn't working as expected. What a mess ! – thethakuri May 14 '16 at 09:07
1

How can I manually close the drop down?I tried with the opposite of $event.startPropagation() but not working – forgottofly Jun 24 '16 at 11:54
How come I can't get a controller to work inside a dropdown? `
` -- the button click event doesnt' fire. – chovy Aug 19 '16 at 21:43
Works even with ng bootstrap dropdown implemented in Angular4. – Becario Senior Nov 02 '17 at 16:57
Excellent. This is working solution in Bootstrap v3.3.5 + angularJs – Muneer Aug 14 '19 at 09:51
Good one @Dane. However I'm using `(click)` instead of `ng-click`. – Tanzeel Jan 08 '20 at 17:24

score 27 · Answer 2 · answered Dec 02 '15 at 23:16

27

For those who are using Angular UI-Bootstrap 0.13.0 or later version, here is the cleaner way that states on the UI-Bootstrap documentation.

By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows:

always - (Default) automatically closes the dropdown when any of its elements is clicked.

outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.

disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open. The dropdown will no longer close on $locationChangeSuccess events.

Here is the link to the documentation: https://angular-ui.github.io/bootstrap/#/dropdown

answered Dec 02 '15 at 23:16

Anthony Huang

566
6
7

This is great, but where exactly do I put `outsideClick`? – chovy Aug 19 '16 at 20:56
I think I have 0.2.8 is that older than 0.13? – chovy Aug 19 '16 at 21:04
1
for Angular 2 the usage for 'outsideClick' is: `
Open Dropdown

{{item}}
`
– sanyooh Apr 06 '17 at 13:39
1

The problem with this is the caveat "...the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open." The toggle part is easy in most cases (do not add a toggle), but the other 2 may not be, depending on the project. – trysis Apr 07 '17 at 19:38

score 4 · Answer 3 · answered May 15 '19 at 19:10

4

You can stop event from bubbling up in DOM Tree in angular 2 and above by adding event propagation. Ex: (click)="$event.stopPropagation()"

answered May 15 '19 at 19:10

Ramki

158
6

Erik Hunter · Answer 4 · 2014-08-04T14:41:23.410

This is another hack, but you could add a directive to stop the toggle event from propagating. For example something like this worked for my specific use case:

<div>
<div class="btn-group" dropdown is-open="status.isopen" ng-controller="DropDownCtrl">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-click="goToPage('Action')">Action</li>
    <li disable-auto-close>Don't Dismiss</li>
    <li ng-click="goToPage('SomethingElse')">Something else here</li>
  </ul>
</div>

Adding this directive to an element should disable the auto close behavior:

angular.module('plunker', ['ui.bootstrap'])
.controller('DropDownCtrl', ['$scope', '$location',
function($scope, $location) {
  // Controller logic here
  $scope.goToPage = function(page) {
    console.log("Going to " + page + ". Dropdown should close");
    $location.path(page);
  };
}])
.directive('disableAutoClose', function() {
  // directive for disabling the default
  // close on 'click' behavior
  return {
        link: function($scope, $element) {
            $element.on('click', function($event) {
                console.log("Dropdown should not close");
                $event.stopPropagation();
            });
        }
    };
});

Plunker Example Here

Unfortunately I think it's a wrong solution, pal. The reason why your "Don't Auto Dismiss"
good catch @adam_0628. I added that event.stopPropagation in the wrong spot. But the basic idea should work. You want to disable the click event of the element. You do that by stopping the event from propagating up the chain with '$event.stopPropagation();' I updated the code above as well as the plunkr. Hopefully this solution works for you — Erik Hunter, Aug 04 '14 at 14:37

score 0 · Answer 5 · answered May 18 '14 at 15:36

0

This is a crude way of overriding it. You need to control the is-open attribute manually and hijack the on-toggle event, example:

<div class="btn-group" dropdown is-open="ctrl.isOpen" on-toggle="toggled(open)">
    <button type="button" class="btn btn-primary dropdown-toggle">
        Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Controller:

    $scope.toggled = function (open) {
        $timeout(function () {
            $scope.ctrl.isOpen = true;
        });
    };

I would ask for a property on the dropdownConfig constant (something like autoClose) for a permanent solution.

answered May 18 '14 at 15:36

Rob J

6,609
5
28
29

Hi, Thank you for your answer - this works basically, but it causes ugly flickering - the dropdown is closed and opened again. Is there no other way to override functions bound to events in JavaScript? – ulilicht May 19 '14 at 08:24
I opened a github issue as you suggested: https://github.com/angular-ui/bootstrap/issues/2218 – ulilicht May 19 '14 at 08:44
To unbind a specific handler to an event, you would need a reference to that handler and do $(document).unbind('click', closeDropdown); or you could unbind all handlers for the event like so: $(document).unbind('click'); You can use the jQuery _data object to get handlers attached to an element event, but that is intended for internal use, see this post: http://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object – Rob J May 19 '14 at 14:21

score 0 · Answer 6 · answered Jun 23 '14 at 14:01

This is an even more crude way of overriding it based on Rob Jacobs answer except that it prevents the ugly flickering ulilcht commented on:

    $scope.toggled = function (open) {
        $scope.open = true;
        var child = $scope.$$childHead;
        while (child) {
            if (child.focusToggleElement) {
                child.isOpen = true;
                break;
            }
            child = child.$$nextSibling;
        }
    };

score 0 · Answer 7 · answered Nov 14 '14 at 10:13

0

You can also use this solution : https://gist.github.com/Xspirits/684beb66e2499c3ff0e5 Gives you a bit more of control over the dropdown, if that's ever needed.

answered Nov 14 '14 at 10:13

Xspirits

217
2
7

cstuncsik · Answer 8 · 2015-06-05T15:11:41.137

You can decorate directives.

With this way you don't have to touch the original code and you can keep the original behaviour.

You can put a close button inside the dropdown

HTML

<div class="dropdown-menu keep-dropdown-open-on-click" role="menu">
    <i class="icon-close close-dropdown-on-click"></i>
</div>

JS

angular.module('app').config(uiDropdownMenuDecorate);
uiDropdownMenuDecorate.$inject = ['$provide'];
function uiDropdownMenuDecorate($provide) {

    $provide.decorator('dropdownMenuDirective', uiDropdownMenuDecorator);

    uiDropdownMenuDecorator.$inject = ['$delegate'];

    function uiDropdownMenuDecorator($delegate) {

        var directive = $delegate[0];
        var link = directive.link;

        directive.compile = function () {
            return function (scope, elem, attrs, ctrl) {
                link.apply(this, [scope, elem, attrs, ctrl]);
                elem.click(function (e) {
                    if (elem.hasClass('keep-dropdown-open-on-click') && !angular.element(e.target).hasClass('close-dropdown-on-click')) {
                        e.stopPropagation();
                    }
                });
            };
        };

        return $delegate;
    }
}

score 0 · Answer 9 · edited Oct 26 '16 at 17:14

Here is what the code looks like using the approved angular-bootstrap auto-close method. Notice the auto-close attribute goes on the top <div>.

<div class="btn-group" uib-dropdown auto-close="disabled">
    <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <textarea class="form-control" ng-model="description" rows="4" placeholder="Description"></textarea>
    </ul>
</div>

How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

9 Answers9

Linked