为什么 AngularJS ng-click 指令在生成的搜索结果中不起作用答案

【问题标题】：Why doesn't AngularJS ng-click directive work inside generated search results为什么 AngularJS ng-click 指令在生成的搜索结果中不起作用
【发布时间】：2018-01-18 18:00:55
【问题描述】：

我已经定义了一个简单的ng-click 指令，它恰好在生成的搜索结果中，但是这个指令不起作用，我不知道为什么。

我的应用使用 index.html 文件，其中引导 AngularJS 并定义控制器：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<body ng-controller="MainCtrl">
<main>
...
@@include('partials/search-results.html', {"title": "Results", "classTitle": "title_tablet-centered title_results" })
</main>
@@include('partials/footer.html')
</body>
</html>

生成的搜索结果出现在包含部分@@include /partials/search-results.html 的位置。我没有在index.html 中明确定义的视图（例如，通过<div ui-view>）。

我使用 Algolia 即时搜索进行搜索，因此在 search.js 中我使用 Algolia hits 小部件根据此模板显示结果列表：

hitTemplate =
'<li class="hit">' +
'<div>
'<h5>{{{name}}}</h5>' +
'<p>{{{description}}}</p>' +
'<a href="#" ng-click="showDetails()">Read More</a>' + '</div>' +
'</li>';

小部件将ng-click="showDetails()" 指令添加到每次点击的“阅读更多”按钮。

MainCntrl.js

(function() {
  function MainCtrl($scope) {

    $scope.showDetails = function(){
        console.log("Button clicked");
    };

  }
  angular
    .module('myApp')
    .controller('MainCtrl', ['$scope', MainCtrl]);
})();

行为：当我在任何搜索结果中单击“阅读更多”按钮时，不仅没有消息记录到控制台，而且搜索结果被清除并且没有错误消息出现在控制台中。

问题：鉴于搜索结果部分（和showDetails() 指令）似乎在ng-app 的范围内，为什么ng-click 指令不起作用？

【问题讨论】：

听起来像是新项目在附加到 DOM 后永远不会编译。
@dfsq 你的意思是 Angular 编译的吗？
是的，来自 Angular。
@dfsq。好的，我想我可能会尝试在某处手动 $compile 这些 DOM 元素。

标签： javascript angularjs algolia

【解决方案1】：

这是因为新生成的 DOM 元素不是 $compiled。 Angular 需要知道那些被创建以包含在 $digest 循环中的新 DOM 元素。一旦生成，您需要手动 $compile 您的模板。搜索完成后，您可以直接获取包装 div 并编译 innerHTML

你怎么看？

【讨论】：

谢谢 - 一个问题...“一旦搜索完成，您可以直接获取包装 div 并编译 innerHTML”。从表面上看，这听起来很简单，但有必要将指令与$compile结合使用吗？