How to use Twitter typehead.js with Angular compile function?

Question

I am trying to use Twitter's typeahead.js (not the Bootstrap one) along with AngularJS. I can get it all up and running just fine, until I try to get fancy use the custom template and engine options.

If I use Twitter's own Hogan.js for templating, and pass in a string template via a script tag, I am able to render the custom results that I want, but it is just pure HTML and none of the Angular directives will work.

My question is, how can I utilize the typeahead.js library and render my own custom result, and also utilize Angular's powerful compilation and two way bindings. Here is a gist with some sample code to illustrate what I am trying to achieve. Any help would be greatly appreciated!

Gist with sample code: https://gist.github.com/i8ramin/5690826

score 3 · Accepted Answer · answered Jun 08 '13 at 18:06

3

I decided to use the Typeahead library from the UI Bootstrap Angular directives project instead. It doesn't really answer the question above, but thought it might be useful for others to know about the alternative approach.

answered Jun 08 '13 at 18:06

Ramin

223
4
10

Thanks, this was so much easier to integrate with Angular models – Nexxas Jun 29 '16 at 14:21

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

You can switch what you use for bindings in Angular - Igor Minar answered a similar question here.

In addition, you could try tweaking the settings so that you can use Angular's template engine instead.

edited May 23 '17 at 12:32

Community

1
1

answered Jun 01 '13 at 16:48

BahamutWC

194
2
8

I don't actually have an issue with the binding syntax. It is more a question of, how do you utilize Angular JS template compiling along with the twitter typeahead.js library. – Ramin Jun 01 '13 at 20:27

How to use Twitter typehead.js with Angular compile function?

2 Answers2