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 will traverse the dom at the beginning of startup, find out all the directives bound in html, compile and link, and then instructions like ｀v-click｀ will bind response events to the dom elements where they are located. If you directly insert the HTML string into the DOM, Angular will have no chance to parse the instructions in this string of HTML. In order to solve this problem, angular’s ​​built-in $compile service.

Usage:

1. inject $compile service

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

3. If compile htmlstring finally insert the return after the link into the dom

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

Official website document:

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

Answer 2

The idea of ​​​​angularjs should try to avoid operating DOM. Your needs should be realized through other ways, and your goals can be achieved through data binding, or you can use ng-template to do it.

Answer 3

The operations of DOM are all in the instructions. You have to write the DOM structure you currently want to operate as instructions, and then there is ele in the parameters of the link function for you to operate. The HTML you want to copy has ngclick. The same will take effect after copying.