Twitter typeahead.js: Can Angular JS be used as a template engine? If not, how can I replace "{{}}" for Hogan / Mustache js?

Question

Hi guys, I am working with twitter typeahead.js and I was wondering if it is possible to change hogan.js to use something other than {{}} ?

Now I look at the mini-code , and I have no idea what to change for something so simple. Performing a search and replace violates it.

I ask for this, mainly because I use Angular JS, but twitter typeahead requires a template engine that causes hogan and Angular to collide {{}} . An even better solution would be to simply modify Angular JS (I don't know that this is not a template engine) and Hogan ditches to meet the following criteria:

Any template engine will work with typeahead.js if it adheres to the following API:

 // engine has a compile function that returns a compiled template var compiledTemplate = ENGINE.compile(template); // compiled template has a render function that returns the rendered template // render function expects the context to be first argument passed to it var html = compiledTemplate.render(context); 

Answer 1

If you want to use Hogan.js with Angular, you can change the delimiters by doing something like:

 var text = "my <%example%> template." Hogan.compile(text, {delimiters: '<% %>'}); 

Answer 2

Ignore the documentation for this, just look at the source code :

 function compileTemplate(template, engine, valueKey) { var renderFn, compiledTemplate; if (utils.isFunction(template)) { renderFn = template; } else if (utils.isString(template)) { compiledTemplate = engine.compile(template); renderFn = utils.bind(compiledTemplate.render, compiledTemplate); } else { renderFn = function(context) { return "<p>" + context[valueKey] + "</p>"; }; } return renderFn; } 

It happens that you can simply pass the template function, called with the context object, which contains the data that you passed in the binding objects during the instantiation, therefore:

 $('#economists').typeahead({ name: 'economists', local: [{ value: 'mises', type: 'austrian economist', name: 'Ludwig von Mises' }, { value: 'keynes', type: 'keynesian economist', name: 'John Maynard Keynes' }], template: function (context) { return '<div>'+context.name+'<span>'+context.type.toUpperCase()+'</span></div>' } }) 

Answer 3

It seems that the template mechanism causes typeahead.js to expect an html string, rather than a dom element (in dropdown_view.js). So I'm not sure if there is a good solution for using the angular template. As a test, I managed to bind the result to the angular template, but it should render the element and then get the html value from the element after data binding. I do not like this approach, but I decided that someone might find it useful. I think it will go with the template function, as in the previous post.

Jade template looks like

 .result p {{datum.tokens}} p {{datum.value}} 

Directive

 angular.module('app').directive('typeahead', [ '$rootScope', '$compile', '$templateCache', function ($rootScope, $compile, $templateCache) { // get template from cache or you can load it from the server var template = $templateCache.get('templates/app/typeahead.html'); var compileFn = $compile(template); var templateFn = function (datum) { var newScope = $rootScope.$new(); newScope.datum = datum; var element = compileFn(newScope); newScope.$apply(); var html = element.html(); newScope.$destroy(); return html; }; return { restrict: 'A', link: function (scope, element, attrs, ctrl) { element.typeahead({ name: 'server', remote: '/api/search?q=%QUERY', template: templateFn }); element.on('$destroy', function () { element.typeahead('destroy'); }); element.on('typeahead:selected', function () { element.typeahead('setQuery', ''); }); } }; } ]);