在填充了所有角度字段后，如何让 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 页面底部的脚本标记中添加以下代码，单击按钮将调用我想要的 Fraction 函数：

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

但是，我需要在页面加载时调用该函数。我已经尝试了这些示例，但是在查找具有类成分数量的元素时，我得到了一个空集：

1. 来自https://github.com/jfriend00/docReady/commit/defe8c06f21c86bd5cf529444d8fe5879dca03ca 的 docReady 函数

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

2. 检查就绪状态。

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

3. 窗口加载事件。

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

4. 一个角度元素准备好了。我尝试了各种元素名称，包括文档。

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

5. jquery document.ready。我收到“$ 未定义”错误。我尝试添加

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

   但是，我总是遇到同样的错误。认为 angular 和 jquery 有冲突？我真的不知道；只是假设 jquery 不适用于这个项目。

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

我可能已经尝试了一些我在网上找到的其他方法，但没有写下来。

那么我如何调用 buttonConvert() 来查找具有成分数量类的元素？

谢谢！

Answer 1

你可以使用angular自带的Number filter吗？

{{ number_expression | number : fractionSize}}

{{ingredient.Amount | number : 2}}

Answer 2

似乎我的代码选择具有类成分数量的元素是正确的，但它在所有数据元素被填充之前运行。也就是说，ng-repeat 部分还没有“重复”。我发现，如果我使用事件在文档就绪时运行，然后使用超时，它会给页面时间来填写每个金额。

这是我的解决方案：

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