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