# AngularJS項目開發技巧之獲取模態對話框中的組件ID ### 需求 出于項目開發需求，需要實現的業務邏輯是:藥店端點擊查看“已發貨”“已收貨”訂單詳情時，模塊彈出框中只應出現“取消”按鈕。但現實的情況如下圖所示。 ? 模態框核心代碼如下: ~~~ <script?type="text/ng-template"?id="billDtlContent.html"> ??????? <div?class="modal-header"> ???????????? <h3?class="modal-title">立馬送藥訂單</h3> ???????? </div> ??????? ? <div?class="modal-body"?id="modal-body"?> <table?border="1"?class="table?table-bordered"?> <tr> <td> <div> <label?for="billid">訂單編號:</label> <input?ng-model="billid"?id="billid"?type="text"?disabled/> </div> </td> </tr> ................................................... ................................................... <td> <div> <label?for="merch_name">配送藥店:</label> <input?ng-model="merch_name"?id="merch_name"?type="text"?disabled/> </div> </td> </tr> </table> ???????? </div> ???????? <div?class="modal-footer"?id="modal-footer"?> ???????????? <button?id="ok"?class="btn?btn-primary?btn-lg"?type="button"?ng-click="ok()">確認配送</button> <button?id="reject"?class="btn?btn-danger?btn-lg"?type="button"?ng-click="reject()">殘忍拒絕</button> ??????????? ? <button?id="cancel"?class="btn?btn-warning?btn-lg"?type="button"?ng-click="cancel()">取消</button> ???????? </div> ??? ? </script> ~~~ ? ? ? 由于模態框的實現代碼位于JS腳本中。則考慮使用獲取組件ID的方式獲取相應組件“確認配送”“殘忍拒絕”的ID，經過在其控制器中獲取測試，總是顯示其值為null。獲取語句如下: ~~~ console.log("LTT_Sunny:"); console.log(instance.bill_status_code); if(instance.bill_status_code === '1' || instance.bill_status_code == '2'){ alert("SHQ:" + document.getElementById("reject")); } ~~~ 經過進一步的閱讀代碼，發現可以先獲取模態框組件的ID，即如下語句實現: ? ?? ~~~ document.getElementById("billDtlContent.html").innerHTML; ~~~ 執行后的結果如下圖所示: ? 那么是不是可以進一步獲取其內部組件的ID呢？繼續嘗試如下: ? ? ? ~~~ document.getElementById("billDtlContent.html").innerHTML.getElementById("reject")); ~~~ 結果出現了錯誤，如下所示: ? 吸取前面做二維碼時的教訓，在其相應html頁面中添加如下語句: <i id="sunny" hidden="hidden"></i> 控制器中的語句如下: ~~~ document.getElementById("sunny").innerHTML = htmlContent; alert("SHQ:" + document.getElementById("sunny").innerHTML); alert("SHQ:" + document.getElementById("reject")); ~~~ ? ? ? 結果獲取到了相應組件的ID。 ? ### 總結 有時一個問題解決不了，就應該嘗試著通過其它途徑進行解決。就像在本文中，既然直接獲取無法獲取到JS腳本中組件的ID，自己就嘗試著將獲取到的頁面內容再次放到原頁面內，然后通過DOM操作再次獲取。 ### 后續工作 獲取到模態框組件ID之后，就需要實現需求了。有關組件的隱藏方法自己已經完成。如下所示: ~~~ //控件隱藏控制函數 function displayHideUI(object) { var ui = object; ui.style.display = "none"; } // 控件顯示控制函數 function displayUI(object) { var ui = object; ui.style.display = "inline-block"; } ~~~ 在控制器中調用控件設置方法沒有看到效果。 displayHideUI(document.getElementById("reject")); 通過DOM操作可獲取到其中的ID名稱等等。如下所示: alert("SHQ:"?+?document.getElementById("reject").attributes[0].value); ? 在view中做文章是不可能的了，還是需要改變一下思路。**有時靈感就是來的這么突然，就像幸福一樣。**考慮在控制器中下手，還是閱讀代碼，思考是否可以通過if_else的形式實現上述效果。ng-if就暫不考慮了，因為一般的if語句就足以解決問題。既然模態框是根據其ID值加載的，那么自己就可以在控制器中通過if語句控制加載不同的模態框。那么自己就需要在模態框中添加新的模態框內容了。添加的模態框內容如下: ~~~ ?<script?type="text/ng-template"?id="billDtlContent1.html"> ??????? <div?class="modal-header"> ???????????? <h3?class="modal-title">立馬送藥訂單</h3> ???????? </div> ??????? ? <div?class="modal-body"?id="modal-body"?> <table?border="1"?class="table?table-bordered"?> <tr> <td> <div> <label?for="billid">訂單編號:</label> <input?ng-model="billid"?id="billid"?type="text"?disabled/> </div> </td> </tr> ............................ ................................... <tr> <td> <div> <label?for="merch_name">配送藥店:</label> <input?ng-model="merch_name"?id="merch_name"?type="text"?disabled/> </div> </td> </tr> </table> ???????? </div> ???????? <div?class="modal-footer"?id="modal-footer"?> ??????????? ? <button?id="cancel_Sunny"?class="btn?btn-warning?btn-lg"?type="button"?ng-click="cancel()">取消</button> ???????? </div> ??? ? </script>?? ~~~ 請注意以上兩個模態框是不同的，主要不同點為:模態框的ID、控制按鈕。在控制器中，其if控制語句如下: ~~~ console.log("LTT_Sunny:"); console.log(instance.bill_status_code); if(instance.bill_status_code === '1' || instance.bill_status_code == '2'){ // 在藥店訂單查詢成功后，回調執行模態框彈出 modalInstance = $modal.open({ // 開始執行控制器BillDtlPopCtrl templateUrl: 'billDtlContent1.html', // 模態窗口的地址，指向創建的視圖 controller: 'BillDtlPopCtrl', // 初始化模態范圍,為$modal指定的控制器，初始化$scope，該控制器可用$modalInstance注入 resolve: { // 定義一個成員并將他傳遞給$modal指定的控制器，相當于routes的一個reslove屬性，如果需要傳遞一個objec對象，需要使用angular.copy() items: function () { return $scope.items; } } ); }else{ // 在藥店訂單查詢成功后，回調執行模態框彈出 modalInstance = $modal.open({// 開始執行控制器BillDtlPopCtrl templateUrl: 'billDtlContent.html', // 模態窗口的地址，指向創建的視圖 controller: 'BillDtlPopCtrl', // 初始化模態范圍,為$modal指定的控制器，初始化$scope，該控制器可用$modalInstance注入 resolve: { // 定義一個成員并將他傳遞給$modal指定的控制器，相當于routes的一個reslove屬性，如果需要傳遞一個objec對象，需要使用angular.copy() items: function () { return $scope.items; } } }); } ~~~ ### 效果圖 ? ### 參考文獻 [http://www.w3school.com.cn/jsref/dom_obj_attributes.asp](http://www.w3school.com.cn/jsref/dom_obj_attributes.asp) ### 美文美圖 ?