feat(dropdown): make dropdown-append-to-body configurable (#6356)

* feat(dropdown): make dropdown-append-to-body configurable

Make dropdown-append-to-body accept a value which will be evaluated to
determine if the menu should be appended to body. If no value is
specified, or a non-false value is specified then the menu will be
appended to body. If the value is `false` then the menu will not be
appended to body.

* feat(dropdown): append and remove menu when menu is opened or closed

Only append and remove append-to and append-to-body menus when the
menu is opened or closed. This allows for the values of append-to and
append-to-body to be evaluated when the menu is toggled open, and also
prevents littering of the DOM.

* fix(dropdown): don't remove the dropdown-menu on close

Instead of removing the dropdown-menu on close, append it back to the
original element.

Author: Umer Farooq

src/dropdown/docs/readme.md

@@ -25,7 +25,7 @@ Each of these parts need to be used as attribute directives.
 * `dropdown-append-to-body`
   <small class="badge">B</small>
   _(Default: `false`)_ -
-  Appends the inner dropdown-menu to the body element.
+  Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non `false` value.
 
 * `is-open`
   <small class="badge">$</small>

src/dropdown/dropdown.js

@@ -144,8 +144,6 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
     getIsOpen,
     setIsOpen = angular.noop,
     toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
-    appendToBody = false,
-    appendTo = null,
     keynavEnabled = false,
     selectedOption = null,
     body = $document.find('body');
@@ -162,26 +160,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
       });
     }
 
-    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 && !appendTo) {
-      appendTo = body;
-    }
-
-    if (appendTo && self.dropdownMenu) {
-      appendTo.append(self.dropdownMenu);
-      $element.on('$destroy', function handleDestroyEvent() {
-        self.dropdownMenu.remove();
-      });
-    }
   };
 
   this.toggle = function(open) {
@@ -253,7 +232,42 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
     }
   };
 
+  function removeDropdownMenu() {
+    $element.append(self.dropdownMenu);
+  }
+
   scope.$watch('isOpen', function(isOpen, wasOpen) {
+    var appendTo = null,
+      appendToBody = false;
+
+    if (angular.isDefined($attrs.dropdownAppendTo)) {
+      var appendToEl = $parse($attrs.dropdownAppendTo)(scope);
+      if (appendToEl) {
+        appendTo = angular.element(appendToEl);
+      }
+    }
+
+    if (angular.isDefined($attrs.dropdownAppendToBody)) {
+      var appendToBodyValue = $parse($attrs.dropdownAppendToBody)(scope);
+      if (appendToBodyValue !== false) {
+        appendToBody = true;
+      }
+    }
+
+    if (appendToBody && !appendTo) {
+      appendTo = body;
+    }
+
+    if (appendTo && self.dropdownMenu) {
+      if (isOpen) {
+        appendTo.append(self.dropdownMenu);
+        $element.on('$destroy', removeDropdownMenu);
+      } else {
+        $element.off('$destroy', removeDropdownMenu);
+        removeDropdownMenu();
+      }
+    }
+
     if (appendTo && self.dropdownMenu) {
       var pos = $position.positionElements($element, self.dropdownMenu, 'bottom-left', true),
         css,