编程语言
首页 > 编程语言> > javascript – AngularJS:如何在加载时阻止页面中的“代码闪存”

javascript – AngularJS:如何在加载时阻止页面中的“代码闪存”

作者:互联网

我使用AngularJS创建了一个简单的应用程序.当我打开页面一秒钟时,我会看到下面的屏幕:

但是,在加载完成后,我看到加载和样式化的内容很好:

如何防止页面上的AngularJS代码闪存?这与FOUC有关吗?

这是HTML代码:

<!doctype html>
<html class="no-js" lang="en" ng-app="MainApp">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>

    <style>
    .row.full-width {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: initial;
    }
    </style>

</head>

<body ng-controller="MainCtrl">
    <div class="off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">
            <nav class="tab-bar">
                <section class="right-small">
                    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
                <section class="left tab-bar-section">
                    <h1 class="title">Salary Calculator</h1>
                </section>
            </nav>

            <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li>
                        <label>Location</label>
                    </li>
                    <li><a href="#">United Kingdom</a>
                    </li>
                </ul>
            </aside>

            <section class="main-section">


                <div class="row full-width">
                    <div class="large-4 columns">

                        <ul class="tabs" data-tab>
                            <li class="tab-title active"><a href="#panel1">Annual Salary</a>
                            </li>
                            <li class="tab-title"><a href="#panel2">Monthly Expenses</a>
                            </li>
                        </ul>
                        <div class="tabs-content">
                            <div class="content active" id="panel1">
                                <div class="row">
                                    <div class="large-12 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Salary" ng-model="salary"/>
                                    </div>
                                </div>
                            </div>
                            <div class="content" id="panel2">
                                <div class="row">
                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Rent" ng-model="rent" />
                                    </div>
                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Wireless, TV, Home Phone" ng-model="telecom"/>
                                    </div>

                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="TV License" ng-model="tv" />
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Mobile Phone" ng-model="mobile"/>
                                    </div>
                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Subscription" ng-model="subscription"/>
                                    </div>

                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Electricty" ng-model="electricity" />
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Food" ng-model="food"/>
                                    </div>
                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Transport" ng-model="transport" />
                                    </div>

                                    <div class="large-4 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Charity" ng-model="charity"/>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="large-12 columns">
                                        <input ng-change="calculate()" type="text" placeholder="Other" ng-model="other"/>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="large-8 columns"  ng-cloak >
                        <table >
                       <thead>
                            <tr>
                                <th width="200"></th>
                                <th width="250">Yearly</th>
                                <th width="250">Monthly</th>
                                <th width="250">Weekly</th>
                                <th width="250">Daily</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="val in results">
                            <tr>
                                <td>{{val.rowType}}</td>
                                <td>{{val.yearly}}</td>
                                <td>{{val.monthly}}</td>
                                <td>{{val.weekly}}</td>
                                <td>{{val.daily}}</td>

                            </tr>
                        </tbody>
                        </table>

                    </div>
                </div>



            </section>

            <a class="exit-off-canvas"></a>

        </div>
    </div>

    <script src="../bower_components/angularjs/angular.js"></script>


    <script src="js/app-service.js"></script>
    <script src="js/app-controller.js"></script>
    <script src="js/app-directives.js"></script>
    <script src="js/app.js"></script>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>

    <script>
    $(document).foundation();
    </script>
</body>

</html>

编辑:

除了可接受的解决方案之外,请参阅my answer以获得替代解决方案.

解决方法:

ng-cloak在某种程度上会有所帮助,但您可以使用ng-bind指令而不是{{}}来完全阻止它.

例如

<td ng-bind="val.monthly"> </td>

<td>{{val.monthly}}</td>

标签:javascript,angularjs,zurb-foundation,fouc
来源: https://codeday.me/bug/20191006/1861122.html