angularjs 动态添加html

 

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

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

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

let compiles = $compile(
                                ""
                                + "" + roomName + ""
                                + "剩余:" + resourceArray[0].vacRooms + "
￥" + resourceArray[0].ratePrice + ""
                                + "剩余:" + resourceArray[1].vacRooms + "
￥" + resourceArray[1].ratePrice + ""
                                + "剩余:" + resourceArray[2].vacRooms + "
￥" + resourceArray[2].ratePrice + ""
                                + "剩余:" + resourceArray[3].vacRooms + "
￥" + resourceArray[3].ratePrice + ""
                                + "剩余:" + resourceArray[4].vacRooms + "
￥" + resourceArray[4].ratePrice + ""
                                + "剩余:" + resourceArray[5].vacRooms + "
￥" + resourceArray[5].ratePrice + ""
                                + "剩余:" + resourceArray[6].vacRooms + "
￥" + resourceArray[6].ratePrice + ""
                                + "剩余:" + resourceArray[7].vacRooms + "
￥" + resourceArray[7].ratePrice + ""
                                + "剩余:" + resourceArray[8].vacRooms + "
￥" + resourceArray[8].ratePrice + ""
                                + "剩余:" + resourceArray[9].vacRooms + "
￥" + resourceArray[9].ratePrice + ""
                                + "剩余:" + resourceArray[10].vacRooms + "
￥" + resourceArray[10].ratePrice + ""
                                + "剩余:" + resourceArray[11].vacRooms + "
￥" + resourceArray[11].ratePrice + ""
                                + "剩余:" + resourceArray[12].vacRooms + "
￥" + resourceArray[12].ratePrice + ""
                                + "剩余:" + resourceArray[13].vacRooms + "
￥" + resourceArray[13].ratePrice + "" +
                                ""
                            )($scope);

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