Handlebars.JS 模板中的 Ng-Click 不会触发答案

【问题标题】：Ng-Click Within Handlebars.JS Template Won't FireHandlebars.JS 模板中的 Ng-Click 不会触发
【发布时间】：2016-04-12 18:06:25
【问题描述】：

所以我正在构建一个应用程序，起初我被介绍到使用来自服务器的 JSON 进行 HTML 模板化的 handlebars.js，这很棒。

但我想我可能在概念上遗漏了一些东西，因为我了解 Angular JS 也有模板功能？这些技术不应该一起使用吗？

无论如何，因为我首先从handlebars.js 开始，所以我在handlebars 中有我的模板并且包含在模板中的是ng-click，它当然不会触发，因为Angular 不知道它也不知道在 Angular 中编译。

一旦我运行类似的东西，有没有办法在把手模板中告诉 Angular 这个ng-click：

var source   = $("#newPostTemplate").html();
var template = Handlebars.compile(source);
$("#subBoxone").append(template(theData));

或者我应该只做一个 Angular 模板？我对 Angular 中的模板一无所知，所以继续我的 handlebars.js 实现并让该模板中的 ng-click 工作会很好。我该怎么做？

这是带有ng-click的模板部分：

<button class="btn btn-primary btn-lg thoughtButton" ng-click="pollData()">Submit Additional Comment!</button>

我可以将 ng-click 附加到 DOM 层次结构中更高的另一个元素，并使用$event 来确定它是否是我认为的正确的，但我更愿意直接利用这个生成的ng-click。

谢谢，如有必要，我很乐意提供更多信息！

【问题讨论】：

标签： angularjs handlebars.js

【解决方案1】：

您可以为模板部分保留 Handlebars，但您需要添加一个指令来负责执行 Handlebars 模板然后编译它。

要编译 HTML 块，您可以使用带有 template / compile 函数的指令，或者使用 $compile 自己手动编译 link 函数。我以前从未使用过 Handlebars，因此您可能需要进行一些实验，但示例如下：

angular.module('handlebarsTemplate', [])
  .directive('handlebarsTemplate', function() {
    return {
      ...
      template: function(tElem, tAttrs) {
        var html = tElem.html();
        var template = Handlebars.compile(html);
        return template;
      }
      ...
    };
  });

所以无论你有你的 Handlebars 模板，你只需要将它包装在这个指令中，它应该使用 Angular 和你编译的 Handlebars 模板进行编译。

【讨论】：