angular.js - angular如何取得一段html程式碼賦值到另一個地方，html裡面的ng-click事件還要能生效？

Question

我要使用一個ng-click點擊取得一段html,這個html裡面還有個ng-click事件，我用js找到這段html然後賦值到一個彈層裡面，這個html的ng-click事件就無效了，怎麼整？
$scope.readmore_maincomment = function(event){

    var html = $(event.target).parent(".subcomments").prev().html();           
        $(".subcomments_detail").find(".subcomment_con").html(html);

};

程式碼是簡寫的，就是這樣取得的內容，可能方法用錯了，把angular與jQuery混用了，誰能告訴我怎麼取得這個html內容，然後html裡的ng-click還要能生效

Answer 1

angular在啟動初期會遍歷dom，找出所有在html裡綁定的directive進行compile和link後，類似｀v-click｀這樣的指令才會在所在的dom元素上綁定回應事件。如果直接將html字串插入到dom中angular是沒有機會解析這串html裡的指令。為了解決這個問題，angular內建的$compile service.

Usage:

1. inject $compile service

2. $compile(htmlstring or domelement)(scope)

3. 如果compile htmlstring 最後在將link後的返回插入到dom中

• $compile() return a link function which bind the template to a scope

官網文件：

https://docs.angularjs.org/api/ng/service/$compile

Answer 2

angularjs的想法應該盡量避免對dom的操作，你的需求應該透過其他的方式實現，透過資料的綁定達到你的目標，或者你可以使用ng-template來做。

Answer 3

dom的操作都是在指令裡面的，你要將你目前要操作的dom結構寫成指令，然後link函數中的參數中有ele可以供你操作，你想要複製的那段html有ngclick 也不會有影響的一樣能在複製之後能生效。