AngularJs、Bootstrap 和 Spring、网页渲染/加载问题

Question

我最近开始从事一个 Spring MVC 项目，我为前端购买了一个 AngularJs 和 Bootstrap 模板。集成和配置进行得很顺利，但现在我设法在前端带来了一些数据，并且我注意到一些页面加载视觉问题，这些问题仅在我尝试单击菜单按钮并因此从一个视图导航到另一个视图时发生。下面我附上了 2 个屏幕截图，它们显示了带有 2 个按钮“联系人”和“管理组”的左侧菜单。

假设我在“联系人”页面上，当页面加载包含组或联系人数据的网格时，我点击了“管理组”按钮（或其他方式），几分之一秒我可以看到一些验证 msg 和 Angularjs 表达式，然后页面正常加载，没有错误等。

我还在其他浏览器上进行了测试，例如 Firefox 和 Explorer，但页面加载正常。似乎这个问题只在我使用 chrome 时发生。知道如何解决这个问题吗？

示例代码

<div class="panel-heading">
    <div class="row">
    <div class="col-md-6">
        <div ng-class="{'text-left': displayCreateContactButton == true, 'none': displayCreateContactButton == false}">
                <a ng-href="#addContactsModal"
               role="button"
               ng-click="resetContact();"
               title="<spring:message code='create'/>&nbsp;<spring:message code='contact'/>"
               class="btn btn-primary"
               data-toggle="modal">
                <i class="icon-plus"></i>
                &nbsp;&nbsp;<spring:message code="create"/>&nbsp;<spring:message code="contact"/>
            </a>
        </div>
</div>
    <div class="col-md-6">
        <p class="text-right" style="font-size:1.6em; margin-bottom:0"> Search <spring:message code='contacts.header'/> |
            <a ng-href="#searchContactsModal"
               id="contactsHeaderButton"
               role="button"
               ng-class="{'': displaySearchButton == true, 'none': displaySearchButton == false}"
               title="<spring:message code="search"/>&nbsp;<spring:message code="contact"/>"
               class="btn btn-sm btn-primary" data-toggle="modal">
                <em class="icon-magnifier"></em>
            </a></p>
    </div>
    </div>
</div>

<div class="panel-body">
    <div ng-class="{'alert alert-success alert-dismissible fade in': displaySearchMessage == true, 'none': displaySearchMessage == false}">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong><i class="fa fa-info-circle"></i>&nbsp;{{page.searchMessage}}</strong>&nbsp;

        <a role="button"
           ng-click="resetSearch();"
           ng-class="{'': displaySearchMessage == true, 'none': displaySearchMessage == false}"
           title="<spring:message code='search.reset'/>"
           class="btn btn-default" data-toggle="modal">
            <i class="icon-remove"></i> <spring:message code="search.reset"/>
        </a>
    </div>

    <div role="alert" ng-class="{'alert alert-success alert-dismissible fade in': displayMessageToUser == true, 'none': displayMessageToUser == false}">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <strong><i class="fa fa-info-circle"></i>&nbsp;{{page.actionMessage}}!</strong>.
    </div>

    <div ng-class="{'alert alert-block alert-error': state == 'error', 'none': state != 'error'}">
        <h4><i class="fa fa-info-circle"></i> <spring:message code="error.generic.header"/></h4><br/>

        <p><spring:message code="error.generic.text"/></p>
    </div>

    <div ng-class="{'alert alert-info': state == 'noresult', 'none': state != 'noresult'}">
        <h4><i class="fa fa-info-circle"></i> <spring:message code="contacts.emptyData"/></h4><br/>

        <p><spring:message code="contacts.emptyData.text"/></p>
    </div>

    <div id="gridContainer" ng-class="{'': state == 'list', 'none': state != 'list'}">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th scope="col"><spring:message code="contacts.name"/></th>
                <th scope="col"><spring:message code="contacts.email"/></th>
                <th scope="col"><spring:message code="contacts.phone"/></th>
                <th style="text-align:center" scope="col">#Action</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="contact in page.source">
                <td class="tdContactsCentered">{{contact.name}}</td>
                <td class="tdContactsCentered">{{contact.email}}</td>
                <td class="tdContactsCentered">{{contact.phoneNumber}}</td>
                <td class="width15">
                    <div class="text-center">
                        <input type="hidden" value="{{contact.id}}"/>
                        <a ng-href="#updateContactsModal"
                           ng-click="selectedContact(contact);"
                           role="button"
                           title="<spring:message code="update"/>&nbsp;<spring:message code="contact"/>"
                           class="btn btn-sm btn-warning" data-toggle="modal">
                            <i class="icon-pencil"></i>
                        </a>
                        <a ng-href="#deleteContactsModal"
                           ng-click="selectedContact(contact);"
                           role="button"
                           title="<spring:message code="delete"/>&nbsp;<spring:message code="contact"/>"
                           class="btn btn-sm btn-danger" data-toggle="modal">
                            <em class="fa fa-trash"></em>
                        </a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

Answer 1

如果没有实际看到源代码，很难说，但我想这是 angular 的正常行为，因为 angular 在页面加载后开始工作。因此，html 代码中的角度表达式将在一小段时间内可见。要摆脱这种行为，请参阅

https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

您也可以更改代码以使用 ng-bind：

<span ng-bind="myVar"></span>

而不是

{{myVar}}.

如果您想在初始化期间显示文本，您也可以这样做：

<span ng-bind="myVar">Processing...</span>

Answer 3

您会看到 {{}}，因为数据尚未完全加载。所以代码将被显示。您可以使用ng-bind="" 代替{{}}。或者您可以在标签中添加 ng-cloak。并在 css 中添加 add .ng-cloak display:none .ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}