angularjs 动态添加html

 

使用angularjs 在js文件中动态添加html代码页面检查源码时查看,动态添加的代码都有显示,但是添加的angularjs的ng-XXX的指令不再有效果.

百度了一些,都是一些大神级别的操作,没事适合像我这种刚入门的小菜鸡看得懂的代码,所以结合了多个大神的资料总结了一下适合实践代码.不多说直接上代码.

代码我个人理解的是 使用$complied指令先将动态添加代码进行编译,然后交给$scope管理,这样正在页面的生成的代码 angularjs就会识别动态添加的代码:

let compiles = $compile(
                                "<tr>"
                                + "<td>" + roomName + "</td>"
                                + "<td class =" + "{{" + resourceArray[0].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[0].vacRooms + "<br/>￥" + resourceArray[0].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[1].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[1].vacRooms + "<br/>￥" + resourceArray[1].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[2].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[2].vacRooms + "<br/>￥" + resourceArray[2].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[3].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[3].vacRooms + "<br/>￥" + resourceArray[3].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[4].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[4].vacRooms + "<br/>￥" + resourceArray[4].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[5].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[5].vacRooms + "<br/>￥" + resourceArray[5].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[6].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[6].vacRooms + "<br/>￥" + resourceArray[6].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[7].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[7].vacRooms + "<br/>￥" + resourceArray[7].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[8].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[8].vacRooms + "<br/>￥" + resourceArray[8].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[9].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[9].vacRooms + "<br/>￥" + resourceArray[9].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[10].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[10].vacRooms + "<br/>￥" + resourceArray[10].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[11].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[11].vacRooms + "<br/>￥" + resourceArray[11].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[12].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[12].vacRooms + "<br/>￥" + resourceArray[12].ratePrice + "</td>"
                                + "<td class =" + "{{" + resourceArray[13].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[13].vacRooms + "<br/>￥" + resourceArray[13].ratePrice + "</td>" +
                                "</tr>"
                            )($scope);

                            // 获取元素使用append方法添加编译后的代码
                            $("#roomList").append(
                                compiles
                            );