0

I have a Angular application hosted on Azure. I do not have access to the controller, but I can change the HTML. I want to add a javascript function to convert decimals to fractions. I am able to get the code to work on a button press, but I'm unable to get the javascript function to be called when the page loads. If I try to call the function in the equivalent of a document.ready, I get a null when I try to find the text elements. I'm new to Angular, but I'm guessing it hasn't fully populated the data elements on the page when document.ready is called, but it has by time there's a button click. How can I get this code to work without clicking a button?

Here's the HTML code:

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

If I add the following code in a script tag at the bottom of the HTML page, a button click will call my Fraction function like I want:

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

However, I need that function to be called when the page is loaded. I've tried these examples, but I get a null set when looking for elements with the class ingredient-amount:

  1. A docReady function from https://github.com/jfriend00/docReady/commit/defe8c06f21c86bd5cf529444d8fe5879dca03ca

    docReady(function () {
    buttonConvert();
    });
    
  2. Checking the ready state.

     if (document.readyState === "complete") {
      buttonConvert(); 
     }
    
  3. An on window load event.

    $(window).bind("load", function () { console.log("started"); buttonConvert();});
    
  4. An angular element ready. I tried this with various element names including document.

       angular.element(document).ready(function () {
       buttonConvert();
       });
    
  5. jquery document.ready. I get a "$ is not defined" error. I tried adding

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

    but, I always got the same error. Thinking angular and jquery are conflicting? I don't really know; just assuming jquery won't work for this project.

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

I've probably tried some others I've found online, but didn't write down.

So how do I call buttonConvert() at a time where it's going to find elements with the ingredient-amount class?

Thank you!

0

2 Answers 2

0

Is it possible for you to use Number filter that comes with angular?

{{ number_expression | number : fractionSize}}

{{ingredient.Amount | number : 2}}
2
  • Interesting. Do you know if it's possible to replace "2" in your example with a call to a javascript function that would format the number? Something like this: {{ ingredient.Amount | number: MyFunction( {{ingredient.Amount }} ).
    – boilers222
    Mar 9, 2016 at 13:20
  • Please explain what you are trying to achieve? What is the value of ingredient.Amount? what format do you want to display it? Mar 9, 2016 at 13:47
0

It seems like my code to select elements with the class ingredient-amount was correct, but that it was running before all the data elements were filled in. That is, the ng-repeat section hadn't "repeated" yet. I found that if I used an event to run on document ready and then used a timeout that it gave the page the time to fill in each of the amounts.

Here's my solution:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.