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 );

 

你可能感兴趣的:(js知识)