在所有角度字段填充後，如何獲得JavaScript才能觸發？

Question

我有一個Azure上託管的Angular應用程序。我無法訪問控制器，但我可以更改HTML。我想添加一個javascript函數來將小數轉換爲分數。我能夠讓代碼在按下按鈕上工作，但我無法在頁面加載時調用javascript函數。如果我嘗試調用與document.ready相當的函數，那麼當我嘗試查找文本元素時，會得到空值。我是Angular的新手，但是我猜測當document.ready被調用時，它並沒有完全填充頁面上的數據元素，但是隨着時間的推移，它有一個按鈕點擊。如何在不點擊按鈕的情況下讓這段代碼工作？

這裏的HTML代碼：

<md-dialog aria-label="{{ currentRecipe.Name }}" ng-cloak class="pretty-recipe"> 
<md-toolbar layout="row"> 
    <div class="md-toolbar-tools"> 
     <h3 flex>{{ currentRecipe.Name }}</h3> 
     <h4>MM Score: XX</h4> 
    </div> 
    <span flex></span> 
    <md-button ng-click="close()" aria-label="Close window"> 
     <md-icon>close</md-icon> 
    </md-button> 
</md-toolbar> 
<md-dialog-content oncomplete="buttonConvert"> 
    <div id="divDialog" class="md-dialog-content" layout="row"> 
     <h4>Ingredients</h4> 
      <table class="component-ingredients-container"> 
       <tr ng-repeat-start="component in currentRecipe.Components" 
        ng-show="component.Name"> 
        <td class="component-name-cell"> 
         <span class="component-name">{{component.Name}}</span> 
        </td> 
       </tr> 
       <tr ng-repeat-end ng-repeat="ingredient in component.Ingredients"> 
        <td> 
         <span class="ingredient-amount" id="amount-{{$index}}">{{ingredient.Amount}}</span> 
         <span class="ingredient-unit">{{ingredient.Unit}}</span> 
         <span>&nbsp; &nbsp; {{ingredient.Lookup.Name}}</span> 
         <div class="ingredient-preparation" ng-show="ingredient.Preparation"> 
          <span> &nbsp; &nbsp; {{ingredient.Preparation }}</span> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <button id='btnConvertToFractions' onclick="buttonConvert()">Convert to Fractions</button> 
        </td> 
       </tr> 
      </table> 
     </div> 
</md-dialog-content> 
<md-dialog-actions layout="row"> 
    <md-button class="md-primary" ng-click="refresh()" aria-label="Refresh" 
       ng-show="currentUser.hasRole('RecipeMaintainer')"> 
     <md-icon>refresh</md-icon> 
     Refresh 
    </md-button> 

    <span flex></span> 

    <md-button class="md-primary" ng-click="print()" aria-label="Print"> 
     <md-icon>print</md-icon> 
     Print 
    </md-button> 

</md-dialog-actions> 

如果我在腳本標籤在HTML頁面的底部添加以下代碼，點擊一個按鈕將調用我的分數之類的函數我想：

<script> 
function buttonConvert() { 
    try { 
     console.log("Convert started"); 
     var divs = document.querySelectorAll('.ingredient-amount'); 
     console.log(divs); 

     [].forEach.call(divs, function (div) { 
      console.log("Before: " + div.textContent); 
      div.textContent = Fraction(div.textContent); 
      console.log("After: " + div.textContent); 
     }); 
     console.log("Convert finished"); 
    } 
    catch (ex) { 
     console.log("Error: " + ex); 
    } 
}; 

不過，我需要一個函數被調用時，該頁面已加載。我已經試過這些例子，而是尋找與類成分，量元素，當我得到一個空集：從https://github.com/jfriend00/docReady/commit/defe8c06f21c86bd5cf529444d8fe5879dca03ca

docReady(function() { 
buttonConvert(); 
}); 

1. 一個docReady功能檢查就緒狀態。

   if (document.readyState === "complete") { 
       buttonConvert(); 
   } 
   

2. 一個窗口加載事件。

   $(window).bind("load", function() { console.log("started"); buttonConvert();}); 
   

3. 角元件準備就緒。我用各種元素名稱（包括文檔）嘗試了這一點

   angular.element(document).ready(function() { 
       buttonConvert(); 
       }); 
   

4. jquery document.ready。我收到「$未定義」錯誤。我試圖加入

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 
   </script> 
   

   但是，我總是得到同樣的錯誤。思考角和jQuery是相沖突的？我不知道;只是假設jQuery不會爲這個項目工作。

   $document.ready(function() { 
       buttonConvert(); 
   }); 
   

我可能已經嘗試了一些人，我在網上找到的，但沒有寫下來。

那麼，我該如何在每次調用buttonConvert（）的地方找到具有成分量級的元素呢？

謝謝！

Answer 1

是否有可能使用Number filter附帶角度？

{{ number_expression | number : fractionSize}} 

{{ingredient.Amount | number : 2}} 

Answer 2

好像我的代碼，選擇與類成分，量元素是正確的，但它是所有數據元素填充在之前運行。也就是說，NG-重複部分已經沒有了「重複「。我發現如果我使用一個事件在準備好的文檔上運行，然後使用一個超時，它給了頁面時間來填充每個數量。

這裏是我的解決方案：

<script> 
function buttonConvert() { 
    try { 
     var divs = document.querySelectorAll('.ingredient-amount'); 

     [].forEach.call(
       divs 
      , function (div) { 
       //div.textContent = Fraction(div.textContent); 
       div.textContent = mixin.getFractionFromDecimal(div.textContent); 
      } 
     ); 
    } 
    catch (ex) { 
     console.log("Error: " + ex); 
    } 
}; 

angular.element(document).ready(
    setTimeout(
      function() { 
       buttonConvert(); 
      } 
     , 2000)); 
</script>