locked
Issue with the Angulare js Controls while Loading the DOM RRS feed

  • Question

  • User-1202100973 posted

    I am new to Angular Js

    I have the angular application.

     And we have the JavaScript files that apply the styles to the controls on the web page.

     Here the html element are loaded first in the Dom.

    And the styles from the Java Scripts are applied to those initial controls on the web page.

     But the problem is by the time directive ng-repeat is loaded. The style from Java Scripts are not loading.

    Since they have already loaded.

     SO How Can I load the Java script after the angular elements are loaded on the DOM.

    And all my scripts are the bottom of the Page.

    And here is my Div for 

    <div class="col l3 m6 s12" ng-repeat="card in ShoppingCards">
    <content class="z-depth-1 open-card">
    <div class="front">
    <div class="contact-card">
    <h2 class="truncate">{{card.Name}}</h2>
    <p class="card-company truncate">{{card.Company}}</p>
    <p class="card-title truncate">{{card.JobTitle}}</p>
    </div>
    <div class="information">
    <p class="truncate"><i class="fa fa-envelope"></i>Test@gmail.com</p>
    <p class="truncate"><i class="fa fa-phone"></i> +99999999</p>
    <p class="truncate"><i class="fa fa-mobile"></i> +9999999</p>
    </div>
    </div>
    <div class="back">
    <div class="card-left">
    <p><b>ACTIONS</b></p>
    <p class="truncate"><a href="#">send email</a></p>
    <p class="truncate"><a href="#">call on skype</a></p>
    </div>
    <div class="card-right">
    <p class="center-align"><i class="fa fa-hand-pointer-o"></i></p>
    <p class="center-align">open card</p>
    </div>
    </div>
    </content>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!--<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>-->
    <script type="text/javascript" src="js/jquery.flip.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>

    Tuesday, May 3, 2016 8:34 PM

Answers

  • User36583972 posted

    Hi Aditya_ven,

    How Can I load the Java script after the angular elements are loaded on the DOM.

    You can try the following code.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/angular.js"></script>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script>
            var icolor = 0;
            var iNum = 20;
            $(document).ready(function () {
                document.getElementById("<%=TextBox1.ClientID%>").value = "hello";
                //var iID = setInterval(setbgColor, 2200);
                var iID = setTimeout(setbgColor, 2000);
            });
    
            function setbgColor() {
                document.bgColor = "#" + icolor * iNum * iNum * iNum + icolor * iNum * iNum + icolor * iNum;
                document.getElementById("<%=TextBox1.ClientID%>").value = icolor.toString();
            }
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 9, 2016 11:33 AM

All replies

  • User36583972 posted

    Hi Aditya_ven,

    SO How Can I load the Java script after the angular elements are loaded on the DOM.

    I found some links in the below, there have similar with you. You can refer it and test.

    1: Run additional code after AngularJS has rendered a template:

    http://stackoverflow.com/questions/12304291/angularjs-how-to-run-additional-code-after-angularjs-has-rendered-a-template

    2: Run Javascript AFTER Angular Has Finished Loading All Views:

    http://stackoverflow.com/questions/21686986/run-javascript-after-angular-has-finished-loading-all-views

    3: Sending event when angular.js finished loading:

    http://stackoverflow.com/questions/14968690/sending-event-when-angular-js-finished-loading

    Also, this is the Web API forum. I think you can visit the HTML, CSS and JavaScript forum for getting better support.

    http://forums.asp.net/130.aspx/1?HTML+CSS+and+JavaScript

    Best Regards,

    Yohann Lu

    Wednesday, May 4, 2016 6:05 AM
  • User527778624 posted

    Hi,

    Call your javascript function which applies styles after angularjs render using timeOut()

    Wednesday, May 4, 2016 6:06 AM
  • User-1202100973 posted

    <div  ng-repeat="card in contactCards" on-finish-render="GetData()">

    $timeout(function () {

                        scope.$emit(onFinishRender);

                    });

     So I have been using the on-finish-render in View and $timeout(function(){}}

    But it’s throwing me an error.I not sure what mistake I am doing.

    Please help.

    Wednesday, May 4, 2016 6:10 PM
  • User527778624 posted

    Hi,

    But it’s throwing me an error.I not sure what mistake I am doing.

    replicate your scenario in any JSFiddle or jsbin etc

    so that we can have a look into your code and try rectify your issue.

    Thursday, May 5, 2016 5:56 AM
  • User36583972 posted

    Hi Aditya_ven,

    How Can I load the Java script after the angular elements are loaded on the DOM.

    You can try the following code.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/angular.js"></script>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script>
            var icolor = 0;
            var iNum = 20;
            $(document).ready(function () {
                document.getElementById("<%=TextBox1.ClientID%>").value = "hello";
                //var iID = setInterval(setbgColor, 2200);
                var iID = setTimeout(setbgColor, 2000);
            });
    
            function setbgColor() {
                document.bgColor = "#" + icolor * iNum * iNum * iNum + icolor * iNum * iNum + icolor * iNum;
                document.getElementById("<%=TextBox1.ClientID%>").value = icolor.toString();
            }
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 9, 2016 11:33 AM