3

我正在使用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？

4

1 回答 1

1

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

ngCloak 指令用于防止 AngularJS html 模板在您的应用程序加载时被浏览器以其原始（未编译）形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。

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>

更新（根据给定的小提琴）：

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

ngShow 指令根据提供给 ngShow 属性的表达式显示或隐藏给定的 HTML 元素。

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}}。如果不是，那么hide其他show

<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>

于 2017-06-29T09:40:07.933 回答