我使用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 =＆＃34; openModal（）＆＃34;来更改模板。像这样：
"\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();
};
这是我第一篇关于堆栈溢出的帖子，我是一名词典编纂者，只是在八月开始编码，所以请保持温和！而且清楚！如果我可以添加任何内容以使此帖更清楚，请告诉我。
谢谢，
艾