AngularJS ng-click指令爲什麼不在生成的搜索結果中工作

我已經定義了一個簡單的ng-click指令，它恰好在生成的搜索結果中，但是這個指令不起作用，我不知道爲什麼。AngularJS 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 instantsearch搜索，所以內search.js我使用Algolia 命中部件根據該模板來顯示結果列表：

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

小部件添加ng-click="showDetails()"指令在每次點擊中的「Read More」按鈕。

MainCntrl.js

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

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

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

行爲：當我點擊任何搜索結果中的「更多」按鈕，不僅是沒有消息記錄到控制檯，但搜索結果將被清除，控制檯中不會顯示錯誤消息。

問題：鑑於搜索結果部分（和showDetails()指令）似乎是NG-應用程序，爲什麼不ng-click指令工作的範圍之內？

來源

2017-08-10 orlando21

聲音像新項目一樣，在追加到DOM之後永遠不會編譯。 – dfsq

@dfsq你的意思是由Angular編譯？ – orlando21

是的，由Angular。 – dfsq

這是因爲新的DOM生成的元素不是$編譯的。 Angular需要知道這些新的DOM元素是否包含在$ digest循環中。您需要手動編譯生成的模板。一旦搜索完成，您可以直接獲取包裝div並編譯innerHTML

您認爲如何？

來源

2017-08-10 14:27:39

感謝 - 一個問題......「一旦搜索完成，您可以直接獲取包裝div並編譯innerHTML」。從表面上看，這聽起來很簡單，但是需要將指令與'$ compile'結合使用嗎？ – orlando21

AngularJS ng-click指令爲什麼不在生成的搜索結果中工作

回答

相關問題