Twitter typeahead.js：可以使用 Angular JS 作为模板引擎吗？如果不是，我该如何替换 Hogan/Mustache js 的“{{}}”？答案

【问题标题】：Twitter typeahead.js: Possible to use Angular JS as template engine? If not how do I replace "{{}}" for Hogan/Mustache js?Twitter typeahead.js：可以使用 Angular JS 作为模板引擎吗？如果不是，我该如何替换 Hogan/Mustache js 的“{{}}”？
【发布时间】：2013-07-28 01:59:26
【问题描述】：

我正在使用twitter's typeahead.js，我想知道是否可以修改hogan.js 以使用{{}} 以外的其他内容？

我现在正在查看minified code，但我不知道要为这么简单的东西更改什么。进行查找和替换会破坏它。

我问这个主要是因为我使用的是 Angular JS，但 twitter 的 typeahead 需要一个模板引擎，导致 hogan 和 angular 的 {{}} 发生冲突。更好的解决方案是简单地修改 Angular JS（我知道它不是模板引擎）并放弃 Hogan 以符合以下标准：

只要遵循以下 API，任何模板引擎都可以使用 typeahead.js：

// 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);

【问题讨论】：

如果你想改变 Angular 中的大括号，只要按照这个：docs.angularjs.org/api/ng.$interpolate，不需要修改代码;)
@meiryo，您是如何在 Angular 应用程序中使用 Typeahead.js 的？因为我正在尝试包含它，但我不知道如何继续（我已经使用它但在 jQuery 中）。提前感谢您的帮助:)
@user1651994 我将 Hogan.js 分隔符更改为 <% %>。我所做的只是查找和替换"{{" 和"}}"。不再与角度冲突！让我知道您是否可以使用 Angular 作为模板引擎...不太喜欢仅将 Hogan 包含在一个简单的预输入框中。
@meiryo 实际上我还没有在我的项目中使用 Typeahead.js。在您的项目中如何使用它？是否有自定义指令，或者您只是使用 jQuery 代码？（只是要知道，因为我依赖于现有的 API，所以我不能使用当前版本，并且数据格式与 typeahead Datum 所需的格式不匹配......似乎在客户端中构建数据集 - side 将在 0.10 版本中实现）
@user1651994 你需要加载 jQuery，然后必须创建一个指令并将 typeahead 放入：pastebin.com/ALQYdfrk

标签： angularjs mustache typeahead.js hogan.js templating-engine

【解决方案1】：

忽略这方面的文档，看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;
}

碰巧你可以将一个函数传递给template，可以用一个context对象调用，该对象包含你在实例化时传入数据对象的数据，所以：

$('#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>'
  }
})

【讨论】：

从 0.11.1 开始，您可以使用 templates: { suggestion: function(context) ... }

【解决方案2】：

如果您想在 Angular 中使用 Hogan.js，您可以通过以下方式更改分隔符：

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

【讨论】：

【解决方案3】：

typeahead.js 期望的模板引擎结果似乎是一个 html 字符串，而不是 dom 元素（在 dropdown_view.js 中）。所以我不确定使用角度模板是否有一个好的解决方案。作为测试，我能够将结果绑定到角度模板，但它必须渲染到元素，然后在与数据绑定后从元素中获取 html 值。我不喜欢这种方法，但我想有人可能会觉得它有用。我想我会像上一篇文章那样使用模板函数。

翡翠模板的样子

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

指令

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', '');
        });
      }
    };
  }
]);

【讨论】：