Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(typeahead): change to appendTo
Browse files Browse the repository at this point in the history
- Change signature to `appendTo`, which takes a value that evaluates to a DOM node for API consistency

BREAKING CHANGE: Usage before
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to-element-id="typeahead-container">
```
After
```html
<div id="typeahead-container"></div>
<input typeahead="state for state in states | filter: $viewValue | limitTo: 8" typeahead-append-to="typeaheadContainer">
```
```js
$scope.typeaheadContainer = angular.element(document.querySelector('#typeaheadContainer'));
```

Closes #4797
  • Loading branch information
wesleycho committed Nov 2, 2015
1 parent 08ad077 commit 8637afc
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 10 deletions.
6 changes: 3 additions & 3 deletions src/typeahead/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ 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-append-to`
_(Defaults: null)_ : Should the typeahead popup be appended to an element instead of the parent element?

* `typeahead-editable`
_(Defaults: true)_ :
Expand Down Expand Up @@ -85,4 +85,4 @@ The typeahead directives provide several attributes:

* `typeahead-show-hint`
_(Defaults: false)_ :
Should input show hint that matches the first option?
Should input show hint that matches the first option?
7 changes: 4 additions & 3 deletions src/typeahead/test/typeahead.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -967,7 +967,7 @@ describe('typeahead tests', function() {
expect($scope.result).toEqual($scope.states[0]);
});
});

describe('input hint', function() {
var element;

Expand Down Expand Up @@ -1047,10 +1047,11 @@ describe('typeahead tests', function() {
});
});

describe('append to element id', function() {
describe('append to', 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" uib-typeahead="item for item in states | filter:$viewValue" typeahead-append-to-element-id="myElement"></div>');
$scope.myElement = $document.find('#myElement');
var element = prepareInputEl('<div><input name="input" ng-model="result" uib-typeahead="item for item in states | filter:$viewValue" typeahead-append-to="myElement"></div>');
changeInputValueTo(element, 'al');
expect($document.find('#myElement')).toBeOpenWithActive(2, 0);
$document.find('#myElement').remove();
Expand Down
9 changes: 5 additions & 4 deletions src/typeahead/typeahead.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])

var appendToBody = attrs.typeaheadAppendToBody ? originalScope.$eval(attrs.typeaheadAppendToBody) : false;

var appendToElementId = attrs.typeaheadAppendToElementId || false;
var appendTo = attrs.typeaheadAppendTo ?
originalScope.$eval(attrs.typeaheadAppendTo) : null;

var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;

Expand Down Expand Up @@ -423,7 +424,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])

originalScope.$on('$destroy', function() {
$document.unbind('click', dismissClickHandler);
if (appendToBody || appendToElementId) {
if (appendToBody || appendTo) {
$popup.remove();
}

Expand All @@ -443,8 +444,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 if (appendTo) {
angular.element(appendTo).eq(0).append($popup);
} else {
element.after($popup);
}
Expand Down

0 comments on commit 8637afc

Please sign in to comment.