Add Dropdown AppendTo functionality

src/dropdown/docs/demo.html

@@ -55,7 +55,7 @@
         <li role="menuitem"><a href="#">Separated link</a></li>
       </ul>
     </div>
-    
+
     <!-- Single button using template-url -->
     <div class="btn-group" dropdown>
       <button id="button-template-url" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
@@ -86,6 +86,52 @@
         </ul>
     </div>
 
+    <hr>
+    <!-- AppendTo use case -->
+    <h4>append-to vs. append-to-body vs. inline example</h4>
+    <div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
+      <div id="dropdown-long-content" style="height: 100em;">
+        <div id="dropdown-hidden-container" style="height: 4em; overflow: hidden;">
+          <div class="btn-group" dropdown dropdown-append-to="appendToEl">
+            <button id="btn-append-to" type="button" class="btn btn-primary" dropdown-toggle>
+              Dropdown in Container <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to">
+              <li role="menuitem"><a href="#">Action</a></li>
+              <li role="menuitem"><a href="#">Another action</a></li>
+              <li role="menuitem"><a href="#">Something else here</a></li>
+              <li class="divider"></li>
+              <li role="menuitem"><a href="#">Separated link</a></li>
+            </ul>
+          </div>
+          <div class="btn-group" dropdown dropdown-append-to-body>
+            <button id="btn-append-to-to-body" type="button" class="btn btn-primary" dropdown-toggle>
+              Dropdown on Body <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-to-body">
+              <li role="menuitem"><a href="#">Action</a></li>
+              <li role="menuitem"><a href="#">Another action</a></li>
+              <li role="menuitem"><a href="#">Something else here</a></li>
+              <li class="divider"></li>
+              <li role="menuitem"><a href="#">Separated link</a></li>
+            </ul>
+          </div>
+          <div class="btn-group" dropdown>
+            <button id="btn-append-to-single-button" type="button" class="btn btn-primary" dropdown-toggle>
+              Inline Dropdown <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-single-button">
+              <li role="menuitem"><a href="#">Action</a></li>
+              <li role="menuitem"><a href="#">Another action</a></li>
+              <li role="menuitem"><a href="#">Something else here</a></li>
+              <li class="divider"></li>
+              <li role="menuitem"><a href="#">Separated link</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script type="text/ng-template" id="dropdown.html">
         <ul class="dropdown-menu" role="menu" aria-labelledby="button-template-url">
           <li role="menuitem"><a href="#">Action in Template</a></li>

src/dropdown/docs/demo.js

@@ -18,4 +18,6 @@ angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope,
     $event.stopPropagation();
     $scope.status.isopen = !$scope.status.isopen;
   };
+
+  $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
 });

src/dropdown/docs/readme.md

@@ -6,6 +6,8 @@ There is also the `on-toggle(open)` optional expression fired when dropdown chan
 Add `dropdown-append-to-body` to the `dropdown` element to append to the inner `dropdown-menu` to the body.
 This is useful when the dropdown button is inside a div with `overflow: hidden`, and the menu would otherwise be hidden.
 
+Pass an [angular.element](https://docs.angularjs.org/api/ng/function/angular.element) object as the `dropdown-append-to` attribute on the `dropdown` element to append the inner `dropdown-menu` to the passed in element. This is particularly useful when appending to the body element isn't possible, perhaps because the dropdown button is enclosed in a scrollable container. Explore the demo on the left to see this in action. Expand the three different dropdowns and try scrolling inside the containing element.
+
 Add `keyboard-nav` to the `dropdown` element to enable navigation of dropdown list elements with the arrow keys.
 
 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:

src/dropdown/dropdown.js

@@ -74,6 +74,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     setIsOpen = angular.noop,
     toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
     appendToBody = false,
+    appendTo = null,
     keynavEnabled = false,
     selectedOption = null,
     body = $document.find('body');
@@ -90,12 +91,23 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       });
     }
 
+    if (angular.isDefined($attrs.dropdownAppendTo)) {
+      var appendToEl = $parse($attrs.dropdownAppendTo)(scope);
+      if (appendToEl) {
+        appendTo = angular.element(appendToEl);
+      }
+    }
+
     appendToBody = angular.isDefined($attrs.dropdownAppendToBody);
     keynavEnabled = angular.isDefined($attrs.keyboardNav);
 
-    if (appendToBody && self.dropdownMenu) {
-      body.append(self.dropdownMenu);
-      body.addClass('dropdown');
+    if (appendToBody && !appendTo) {
+      appendTo = body;
+    }
+
+    if (appendTo && self.dropdownMenu) {
+      appendTo.append(self.dropdownMenu);
+      appendTo.addClass('dropdown');
       element.on('$destroy', function handleDestroyEvent() {
         self.dropdownMenu.remove();
       });
@@ -167,14 +179,17 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   };
 
   scope.$watch('isOpen', function(isOpen, wasOpen) {
-    if (appendToBody && self.dropdownMenu) {
-      var pos = $position.positionElements(self.$element, self.dropdownMenu, 'bottom-left', true);
-      var css = {
+    if (appendTo && self.dropdownMenu) {
+      var pos = $position.positionElements(self.$element, self.dropdownMenu, 'bottom-left', true),
+        css,
+        rightalign;
+
+      css = {
         top: pos.top + 'px',
         display: isOpen ? 'block' : 'none'
       };
 
-      var rightalign = self.dropdownMenu.hasClass('dropdown-menu-right');
+      rightalign = self.dropdownMenu.hasClass('dropdown-menu-right');
       if (!rightalign) {
         css.left = pos.left + 'px';
         css.right = 'auto';
@@ -183,10 +198,24 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
         css.right = (window.innerWidth - (pos.left + self.$element.prop('offsetWidth'))) + 'px';
       }
 
+      // Need to adjust our positioning to be relative to the appendTo container
+      // if it's not the body element
+      if (!appendToBody) {
+        var appendOffset = $position.offset(appendTo);
+
+        css.top = pos.top - appendOffset.top + 'px';
+
+        if (!rightalign) {
+          css.left = pos.left - appendOffset.left + 'px';
+        } else {
+          css.right = (window.innerWidth - (pos.left  - appendOffset.left + self.$element.prop('offsetWidth'))) + 'px';
+        }
+      }
+
       self.dropdownMenu.css(css);
     }
 
-    var openContainer = appendToBody ? body : self.$element;
+    var openContainer = appendTo ? appendTo : self.$element;
 
     $animate[isOpen ? 'addClass' : 'removeClass'](openContainer, openClass).then(function() {
       if (angular.isDefined(isOpen) && isOpen !== wasOpen) {

src/dropdown/test/dropdown.spec.js

@@ -220,6 +220,10 @@ describe('dropdownToggle', function() {
       element = dropdown();
     });
 
+    afterEach(function() {
+      $document.find('body').removeClass('dropdown');
+    });
+
     it('adds the menu to the body', function() {
       expect($document.find('#dropdown-menu').parent()[0]).toBe($document.find('body')[0]);
     });
@@ -249,6 +253,53 @@ describe('dropdownToggle', function() {
     });
   });
 
+  describe('using dropdown-append-to', function() {
+    var initialPage;
+
+    function dropdown() {
+      return $compile('<li dropdown dropdown-append-to="appendTo"><a href dropdown-toggle></a><ul class="dropdown-menu" id="dropdown-menu"><li><a href>Hello On Container</a></li></ul></li>')($rootScope);
+    }
+
+    beforeEach(function() {
+      $document.find('body').append(angular.element('<div id="dropdown-container"></div>'));
+
+      $rootScope.appendTo = $document.find('#dropdown-container');
+      $rootScope.$digest();
+
+      element = dropdown();
+      $document.find('body').append(element);
+    });
+
+    afterEach(function() {
+      // Cleanup the extra elements we appended
+      $document.find('#dropdown-container').remove();
+    });
+
+    it('appends to container', function() {
+      expect($document.find('#dropdown-menu').parent()[0].id).toBe('dropdown-container');
+    });
+
+    it('adds dropdown class to container', function() {
+      expect($document.find('#dropdown-container').hasClass('dropdown')).toBe(true);
+    });
+
+    it('toggles open class on container', function() {
+      var container = $document.find('#dropdown-container');
+
+      expect(container.hasClass('open')).toBe(false);
+      element.find('[dropdown-toggle]').click();
+      expect(container.hasClass('open')).toBe(true);
+      element.find('[dropdown-toggle]').click();
+      expect(container.hasClass('open')).toBe(false);
+    });
+
+    it('removes the menu when the dropdown is removed', function() {
+      element.remove();
+      $rootScope.$digest();
+      expect($document.find('#dropdown-menu').length).toEqual(0);
+    });
+  });
+
   describe('integration with $location URL rewriting', function() {
     function dropdown() {
       // Simulate URL rewriting behavior