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

Answer 1

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:

  
    Button dropdown 
  
  

    
Action
    
Don't Dismiss
    
Something else here
  

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