Question

我最近开始研究一个Spring MVC项目，我在前端购买了AngularJs＆amp; amp; Bootstrap模板。集成和配置运行良好，但现在我设法在前端带来了一些数据，我注意到一些页面加载视觉问题，只有当我尝试单击菜单按钮并因此从一个视图导航到另一个视图时才会发生。下面我附上了2个屏幕截图，其中显示了左侧菜单和2个按钮＆＃34; Contacts＆＃34;和＆＃34;管理群组＆＃34;。

假设我在＆＃34;联系人＆＃34;页面和我点击＆＃34;管理群组＆＃34;当页面使用组或联系人数据加载网格时，按钮（或其他方式），在几分之一秒内，我可以看到一些验证msg和Angularjs表达式，之后页面正常加载，没有错误或这样。

我还在其他浏览器上测试过，比如Firefox和资源管理器，但页面正常加载。似乎这个问题只会在我使用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

很难说它没有实际看到源代码，但我想这是角度上的正常行为，因为角度在页面加载后开始工作。因此，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中添加添加.ng-cloak display：none .ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}

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

3 个答案: