3

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

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, this was so much easier to integrate with Angular models
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.

Improve this answer

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.