html - AngularJS 代码元素在获取 API 响应之前显示在 HTML UI 中

Question

我正在使用 Angularjs和 HTML5。我有一个页面，其中一些元素取决于 Angularjs多变的。 例如在我的 HTML 代码中我有:

<div class="col-xs-12 col-sm-4 top-buffer">
    <div class="info-box">
        <div data-ng-bind-html="statusClass"></div>
        <div class="info-box-content">
            <span class="info-box-text">Status</span> <span
                class="info-box-number">{{statusName}}</span>
        </div>
        <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
</div>

或在整个 div 上显示 ng-show

<div data-ng-show="isBusy" class="col-xs-12 col-sm-6 col-sm-offset-3">

和

<div data-ng-show="!isBusy" class="col-xs-12 col-sm-6 col-sm-offset-3">

所以 Ione 被隐藏，一个被显示。

statusName 和 statusClass，与 isBusy 和所有其他变量一样，是从 Angularjs 中检索的http 调用所以一秒钟我的页面看起来不同。 我怎样才能避免这种行为？我想是否可以在页面加载之前加载此变量，但对于 data-ng-bind-html？

Answer 1

我认为使用 ng-cloak 将解决您的问题。

The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

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

所以你可以做的是在页面加载之前对要等待呈现的元素调用 ng-cloak 指令。

<div ng-show="isBusy" class="col-xs-12 col-sm-6 col-sm-offset-3" ng-cloak>

---

更新(根据给定的 fiddle ):

---

ng-show 根据提供的表达式显示或隐藏给定的 HTML 元素。

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.

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

您渲染两个按钮。两个按钮具有相同的表达式，除了一个按钮检查表达式是否为 true 而另一个按钮检查表达式是否为 false

<!-- True -->
<button ng-show="clickedStartButton" ng-cloak>{{text}}</button>

<!-- False -->
<button ng-show="!clickedStartButton" ng-cloak>{{text2}}</button>

ng-show="!clickedStartButton" 将始终在开始时返回 false，因为尚未为其分配任何值。所以这个 button 将始终呈现。当然，当您执行 $scope.clickedStartButton = true 时除外。但是后来

<button ng-show="clickedStartButton" ng-cloak>{{text}}</button>

将在没有 {{text}} 属性的情况下呈现。

您可以执行以下操作来避免它。检查 {{text2}} 是否设置。如果不是，则隐藏 else 显示

<button ng-if="!clickedStartButton && text2" ng-cloak>{{text2}}</button> 

---

演示

var app=angular.module('timerApp', []);
app.controller('timerController', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
		$timeout(function() {$scope.text="PROVA"; $scope.text2="PROVA2"; $scope.clickedStartButton=true; }, 2000);
   
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Will be rendered after 2 seconds

<div ng-app="timerApp" ng-controller="timerController">
    <button ng-if="clickedStartButton" ng-cloak>{{text}}</button>
    <button ng-if="!clickedStartButton && text2" ng-cloak>{{text2}}</button>
</div>