Question

我已经定义了一个简单的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的位置。我没有在<div ui-view>中明确定义的观点（例如，通过index.html）。

我使用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()"指令添加到＆＃34;阅读更多＆＃34;每次击中按钮。

MainCntrl.js

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

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

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

行为：当我点击＆＃34;阅读更多＆＃34;任何搜索结果中的按钮，不仅没有消息记录到控制台，而且搜索结果被清除，控制台中不显示任何错误消息。

问题：鉴于搜索结果部分（和showDetails()指令）似乎属于ng-app的范围，为什么不{{1}指令工作？

Answer 1

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

您怎么看？

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

1 个答案: