Question

我正在显示一些数据，因此在页面加载时，＆＃34;找不到数据＆＃34;控制正在运行，我应该怎么做才能防止这种情况发生？这是我的代码

 <ul id="owl-example" class="list-unstyled topContributors">
                    <li ng-show="TopContributors.length==0">
                        <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
                    </li>
                    <li ng-repeat="contributors in TopContributors">
                        <img ng-src="{{contributors.AccountName}}" />

                        <div class="contName">
                            <p>{{contributors.UserName}}</p>
                        </div>

                    </li>
                </ul>

Answer 1

您可以添加一个标记以隐藏“No Contributors ....”，直到请求未完成

<li ng-show="TopContributors.length==0 && flag">
  <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
</li>

Answer 2

我认为以下代码足以实现您想要的而不是添加标志：

<li ng-show="TopContributors && TopContributors.length==0">

Answer 3

在你的控制器中（用es6编写，但你得到漂移）：

export default class MyController extends Base {
  constructor() {
    super(arguments);
    this.loading = true;
    this.loadData();
  }

  loadData() {
    // Assumes data loaded correctly;
    someCodeLoadingData();

    this.loading = false;
  }
}

在你的模板中：

<li ng-show="TopContributors.length === 0 && vm.loading === false">
  <p>No Contributors....</p>
</li>

将样式放在样式表中，保持模板清洁。 vm（至少在我的情况下）来自我们的基地，其中vm = this;

Answer 4

如果数据不是来自使用AJAX调用的API，则可以使用ng-cloak来实现此目的。基本上它会在对该div或元素执行任何函数之前等待变量加载将ng-cloak添加到ng-show语句中，如下所示：

<ul id="owl-example" class="list-unstyled topContributors">
    <li ng-show="TopContributors.length==0" ng-cloak>
        <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
    </li>
    <li ng-repeat="contributors in TopContributors">
        <img ng-src="{{contributors.AccountName}}" />

        <div class="contName">
            <p>{{contributors.UserName}}</p>
        </div>

    </li>
</ul>

在你的css文件中写：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
 display: none !important;
}

如果它正在使用AJAX呼叫，您可以在呼叫进行过程中设置一个标志，并在您取得成功时更新它。

Answer 5

此处的通常建议是建议为加载状态添加变量。我不认为你甚至需要那个。

除了添加ng-cloak以避免模板加载闪烁之外，我建议您将TopContributors变量默认为负值，这样可以确保在等待加载它时不显示div （从后端服务我假设）。例如：

function topContributorsController(...) {
    $scope.TopContributors = -1; // 'not loaded' state

以下是添加ng-cloak的模板更改：

<ul id="owl-example" class="list-unstyled topContributors" ng-cloak>

在AngularJS中没有找到关于页面加载的数据

5 个答案: