feat(dropdown): Append dropdown menu to body

src/dropdown/docs/demo.html

@@ -42,6 +42,20 @@
       </ul>
     </div>
 
+    <!-- Single button using append-to-body -->
+    <div class="btn-group" dropdown dropdown-append-to-body>
+      <button type="button" class="btn btn-primary dropdown-toggle" 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>
+
     <hr />
     <p>
         <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>

src/dropdown/docs/readme.md

@@ -2,3 +2,6 @@
 Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
 You can either use `is-open` to toggle or add inside a `<a dropdown-toggle>` element to toggle it when is clicked.
 There is also the `on-toggle(open)` optional expression fired when dropdown changes state.
+
+Add `dropdown-append-to-body` to the `dropdown` element to append to the containing `.dropdown-menu` on the body.
+This is useful when the dropdown button is inside a div with `overflow: hidden`.

src/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-angular.module('ui.bootstrap.dropdown', [])
+angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
 
 .constant('dropdownConfig', {
   openClass: 'open'
@@ -51,13 +51,15 @@ angular.module('ui.bootstrap.dropdown', [])
   };
 }])
 
-.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate) {
+.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', '$document', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position, $document) {
   var self = this,
       scope = $scope.$new(), // create a child scope so we are not polluting original one
       openClass = dropdownConfig.openClass,
       getIsOpen,
       setIsOpen = angular.noop,
-      toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop;
+      toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
+      menu,
+      appendToBody = false;
 
   this.init = function( element ) {
     self.$element = element;
@@ -70,6 +72,17 @@ angular.module('ui.bootstrap.dropdown', [])
         scope.isOpen = !!value;
       });
     }
+
+    appendToBody = angular.isDefined($attrs.dropdownAppendToBody);
+
+    if ( appendToBody ) {
+      menu = element.find('.dropdown-menu');
+      $document.find('body').append( menu );
+
+      element.on('$destroy', function handleDestroyEvent() {
+        menu.remove();
+      });
+    }
   };
 
   this.toggle = function( open ) {
@@ -92,6 +105,14 @@ angular.module('ui.bootstrap.dropdown', [])
   };
 
   scope.$watch('isOpen', function( isOpen, wasOpen ) {
+    if ( appendToBody ) {
+      var pos = $position.positionElements(self.$element, menu, 'bottom-left', true);
+      pos.top += 'px';
+      pos.left += 'px';
+      menu.css(pos);
+      menu.toggle(isOpen);
+    }
+
     $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass);
 
     if ( isOpen ) {

src/dropdown/test/dropdown.spec.js

@@ -168,6 +168,20 @@ describe('dropdownToggle', function() {
     });
   });
 
+  describe('using dropdown-append-to-body', function() {
+    function dropdown() {
+      return $compile('<li dropdown dropdown-append-to-body><a href dropdown-toggle></a><ul class="dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
+    }
+
+    beforeEach(function() {
+      element = dropdown();
+    });
+
+    it('adds the menu to the body', function() {
+      expect($document.find('#dropdown-menu').parent()[0]).toBe($document.find('body')[0]);
+    });
+  });
+
   describe('integration with $location URL rewriting', function() {
     function dropdown() {