CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrap
µBio
µBio

Reputation: 10748

typeahead on input dynamically added by directive

I have a directive that dynamically adds an input in response to clicks on the container. I would like to be able to put a typeahead on the directive element that gets applied to the dynamic input. I have set up this plunk to demonstrate.

http://plnkr.co/edit/199KeGRAd32ZeOIjTKe6?p=preview

In my app, the typeahead source is an http call. I put some console logs in the function that makes the http call and do see results coming back, so I know the typeahead is firing, but as you can see in the plunk, the typeahead drop down never appears. What am I doing wrong?

note cross posted on angularui's google group

Upvotes: 2

Views: 2470

Answers (2)

Langdon
Langdon

Reputation: 20063

Is there some reason you need the complexity of $compile? The typeahead directive doesn't seem to let you pass it through very easily, but if you provide use a more generic data source, you can do it like this:

http://plnkr.co/edit/SFhS7kbmI1c6pEyRS18v?p=preview

HTML:

<test test-model="test" test-typeahead-data-source="getData()"></test>

JavaScript:

app.directive("test", function($rootScope, $compile) {
  return {
    restrict: 'E',
    scope: {
      testModel: '=',
      testTypeaheadDataSource: '='
    },
    template: '<input type="text" ng-model="testModel" typeahead="test as test.name for test in testTypeaheadDataSource" />'
  }
});

Upvotes: 1

jpmorin
jpmorin

Reputation: 6018

I had a look at your code, but I could not make it work. Instead maybe you could use a similar feature of AngularUI. They have directive based on the Select2 jQuery plugin.

Have a look at: http://angular-ui.github.io/#/directives-select2

And read the Select2 documentation in order to use multi-values (there is a nice demo): http://ivaynberg.github.io/select2/#multi

I hope it can help you.

Upvotes: 2

Related Questions