Question

我在Azure上托管了一个Angular应用程序。我无权访问控制器，但我可以更改HTML。我想添加一个javascript函数来将小数转换为分数。我可以让代码按下按钮，但是我无法在页面加载时调用javascript函数。如果我尝试在document.ready的等效函数中调用该函数，当我尝试查找文本元素时，我得到一个null。我是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);
    }
};

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

来自https://github.com/jfriend00/docReady/commit/defe8c06f21c86bd5cf529444d8fe5879dca03ca
的docReady函数
```
docReady(function () {
buttonConvert();
});
```

检查就绪状态。

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

窗口加载事件。

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

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

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

jquery document.ready。我得到一个＆＃34; $未定义＆＃34;错误。我尝试添加
```
<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-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>

在填充所有角度字段后，如何让javascript触发？

2 个答案: