在 Angular 中编译 HTML 字符串模板答案

【问题标题】：Compiling HTML string template in Angular在 Angular 中编译 HTML 字符串模板
【发布时间】：2016-02-23 16:30:11
【问题描述】：

我正在使用 Ionic 框架将在线词典转换为移动应用程序，但遇到了一些问题。我不会详细介绍网站的工作原理，但对于它的搜索功能，它会在客户端 JSON 文件上执行近似搜索，然后将最接近查询的 10 个条目注入到以下 HTML 模板中：

"\n<div class='matchContainer'">    <span class=\"matchLeftDiv\">${display_form}<\/span>  \n    <span class=\"matchRightDiv\">${definition}<\/span>  \n    <span style=\"display:block;clear:both;\"> <\/span>\n<\/a><\/div>\n\n\n"

最终在#results div 中显示的内容。在网站中，有一个锚元素，当点击它时，将用户导航到关于他们点击的单词的更详细的页面。对于应用程序，我想单击单词以触发具有相同信息的模式，因此我通过添加 ng-click="openModal()" 来更改模板，如下所示：

"\n<div class='matchContainer' ng-click=\"openModal()\">    <span class=\"matchLeftDiv\">${display_form}<\/span>  \n    <span class=\"matchRightDiv\">${definition}<\/span>  \n    <span style=\"display:block;clear:both;\"> <\/span>\n<\/a><\/div>\n\n\n"

但是，当结果被插入到#results div 中时，ng-click 没有触发。所以我在这里查看了 Stack Overflow，查看了关于 Angular 的团队树屋课程以及 codecademy 课程，并拼凑了我需要编译 HTML 然后附加它的内容。于是我写了如下函数：

$scope.compileHTML = function() {
        var compiledHTML = $compile($("#results"))($scope);
        $("#results").append(compiledHTML);
    };

然后我在处理搜索的函数中调用它：

$scope.getResult = function(searchWord) {
        if ( $(".input").val() === "") {
            $("#results").hide();
        } else if ( $(".input").attr('id') === "engSearch") {
            dataTyped(searchWord, engSearch);
        } else if ( $(".input").attr('id') === "gitSearch") {
            dataTyped(searchWord, gitSearch);
        } 
        $scope.compileHTML();
    };

结果很奇怪。基本上，它只在某些时候有效。有趣的是，当我在浏览页面上做基本相同的事情时，它起作用了！这是我的浏览条目编译器代码。

$scope.compileBrowseHTML = function() {
        var compiledHTML = $compile($("#browseEntries"))($scope);
        $("#browseEntries").append(compiledHTML);
    };

$scope.next10 = function () {
        startIndex += 10;
        tenEntries = get10(entries, startIndex);   
       $("#browseEntries").html(tenEntries.join(""));
        $scope.compileBrowseHTML();
    };

这是我关于堆栈溢出的第一篇文章，我是一名词典编纂者，从 8 月才开始编码，所以请温柔！并且清楚！如果我可以添加任何内容以使这篇文章更清晰，请告诉我。

谢谢，

艾丹

【问题讨论】：

我很好奇为什么你不会在你的视图和模态模板中使用像ng-repeat 这样的东西，而不是通过指令来解决这个问题？根据我可以告诉您的内容，您正在尝试重新创建 ng-repeat 已经做过的一些事情？我可能完全错过了问题所在（除了有时有效，有时无效）
我尝试使用 ng-repeat，但遇到了许多其他问题。我将尝试总结问题所在，然后再发一篇文章。感谢@jusopi 让我朝着正确的方向点头

标签： javascript html angularjs angularjs-scope ionic-framework

【解决方案1】：

您应该为此使用ng-repeat 和数据绑定，或者过滤器，而不是模板编译。

您执行此任务的方式不是“角度方式”。您不应该从控制器操作 DOM。

看看这些链接link link2

【讨论】：

谢谢，使用 ng-repeat 实际上要容易得多！