Fix to allow a form inside a dropdown toggle

src/dropdownToggle/dropdownToggle.js

@@ -3,7 +3,7 @@
  * @restrict class or attribute
  * @example:
    <li class="dropdown">
-     <a class="dropdown-toggle">My Dropdown Menu</a>
+     <a class="dropdown-toggle" close-on-click="true|false">My Dropdown Menu</a>
      <ul class="dropdown-menu">
        <li ng-repeat="choice in dropChoices">
          <a ng-href="{{choice.href}}">{{choice.text}}</a>
@@ -20,8 +20,20 @@ angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['
     link: function(scope, element, attrs) {
       scope.$watch('$location.path', function() { closeMenu(); });
       element.parent().bind('click', function() { closeMenu(); });
-      element.bind('click', function (event) {
 
+      var closeOnClick = angular.isDefined(attrs.closeOnClick) ? scope.$eval(attrs.closeOnClick) : true;
+      if (closeOnClick === false) {
+        angular.forEach(element.parent().children(), function(ele) {
+          var aEle = angular.element(ele);
+          if (aEle.hasClass('dropdown-menu')) {
+            aEle.bind('click', function() {
+              event.stopPropagation();
+            });
+          }
+        });
+      }
+
+      element.bind('click', function (event) {
         var elementWasOpen = (element === openElement);
 
         event.preventDefault();

src/dropdownToggle/test/dropdownToggleSpec.js

@@ -11,8 +11,11 @@ describe('dropdownToggle', function() {
 
   }));
 
-  function dropdown() {
-    return $compile('<li class="dropdown"><a dropdown-toggle></a><ul dropdown-toggle><li>Hello</li></ul></li>')($rootScope);
+  function dropdown(closeOnClick) {
+    if (closeOnClick === undefined) {
+      closeOnClick = true;
+    }
+    return $compile('<li class="dropdown"><a dropdown-toggle close-on-click="' + closeOnClick + '"></a><ul dropdown-toggle close-on-click="' + closeOnClick + '"><li>Hello</li></ul><div class="dropdown-menu"></div></li>')($rootScope);
   }
 
   it('should toggle on `a` click', function() {
@@ -63,5 +66,21 @@ describe('dropdownToggle', function() {
     expect(elm1.hasClass('open')).toBe(false);
     expect(elm2.hasClass('open')).toBe(true);
   });
+
+  it('should not close on click in dropdown-menu when close-on-click="false"', function() {
+    var elm1 = dropdown(false);
+    elm1.find('a').click();
+    expect(elm1.hasClass('open')).toBe(true);
+    elm1.parent().find('div').click(); // dropdown-menu
+    expect(elm1.hasClass('open')).toBe(true);
+  });
+
+  it('should still close on click (outside popup) when close-on-click="false"', function() {
+    var elm1 = dropdown(false);
+    elm1.find('ul').click();
+    expect(elm1.hasClass('open')).toBe(true);
+    elm1.click();
+    expect(elm1.hasClass('open')).toBe(false);
+  });
 });