AngularJS進階(三十一)AngularJS項目開發技巧之擷取模態對話方塊中的組件ID

標籤：routes   組件   mode   oda   錯誤   prim   技術   display   dom   

AngularJS項目開發技巧之擷取模態對話方塊中的組件ID需求

      出於項目開發需求，須要實現的商務邏輯是:藥店端點擊查看“已發貨”“已收貨”訂單詳情時。模組彈出框中僅僅應出現“取消”button。但現實的情況例如以所看到的。

 

模態框核心代碼例如以下:

<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、控制button。在控制器中，其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({// 開始運行控制器BillDtlPopCtrltemplateUrl: ‘billDtlContent1.html‘,// 模態表單的地址，指向建立的視圖controller: ‘BillDtlPopCtrl‘,// 初始化模態範圍,為$modal指定的控制器，初始化$scope。該控制器可用$modalInstance注入resolve: {// 定義一個成員並將他傳遞給$modal指定的控制器，相當於routes的一個reslove屬性，假設須要傳遞一個objec對象。須要使用angular.copy()items: function () {return $scope.items;}}); }else{// 在藥店訂單查詢成功後，回調運行模態框彈出modalInstance = $modal.open({// 開始運行控制器BillDtlPopCtrltemplateUrl: ‘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

美文美圖

 

AngularJS進階(三十一)AngularJS項目開發技巧之擷取模態對話方塊中的組件ID