feat(typeahead): add appendElementToId

- Add appending popup to specific id

Closes #4231
Closes #4497

Author: trueinviso

src/typeahead/docs/readme.md

@@ -24,6 +24,9 @@ The typeahead directives provide several attributes:
 * `typeahead-append-to-body` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: false)_ : Should the typeahead popup be appended to $body instead of the parent element?
 
+* `typeahead-append-to-element-id`
+   _(Defaults: false)_ : Should the typeahead popup be appended to an element id instead of the parent element?
+
 * `typeahead-editable` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: true)_ :
    Should it restrict model values to the ones selected from the popup only ?

src/typeahead/test/typeahead.spec.js

@@ -859,6 +859,16 @@ describe('typeahead tests', function() {
     });
   });
 
+  describe('append to element id', function() {
+    it('append typeahead results to element', function() {
+      $document.find('body').append('<div id="myElement"></div>');
+      var element = prepareInputEl('<div><input name="input" ng-model="result" typeahead="item for item in states | filter:$viewValue" typeahead-append-to-element-id="myElement"></div>');
+      changeInputValueTo(element, 'al');
+      expect($document.find('#myElement')).toBeOpenWithActive(2, 0);
+      $document.find('#myElement').remove();
+    });
+  });
+
   describe('append to body', function() {
     it('append typeahead results to body', function() {
       var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true"></div>');

src/typeahead/typeahead.js

@@ -68,6 +68,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
         var appendToBody =  attrs.typeaheadAppendToBody ? originalScope.$eval(attrs.typeaheadAppendToBody) : false;
 
+        var appendToElementId =  attrs.typeaheadAppendToElementId || false;
+
         var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;
 
         //If input matches an item of the list exactly, select it automatically
@@ -420,7 +422,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
         originalScope.$on('$destroy', function() {
           $document.unbind('click', dismissClickHandler);
-          if (appendToBody) {
+          if (appendToBody || appendToElementId) {
             $popup.remove();
           }
           // Prevent jQuery cache memory leak
@@ -431,6 +433,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
         if (appendToBody) {
           $document.find('body').append($popup);
+        } else if (appendToElementId !== false) {
+          angular.element($document[0].getElementById(appendToElementId)).append($popup);
         } else {
           element.after($popup);
         }