在AngularJS中未找到页面加载时显示的数据

我正在显示一些数据，因此当页面加载时，“未找到数据”控件正在工作，我应该如何防止这种情况？ 这是我的密码

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

没有贡献者



{{contributors.UserName}

您可以添加一个标志来隐藏“无贡献者…”，直到请求未完成

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

没有贡献者

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

在模板中：

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

没有贡献者

---

将样式放在样式表中，保持模板干净。vm（至少在我的例子中）来自我们的基础，其中vm=this

Use可以使用ng-clope来实现这一点，以防数据不是来自使用AJAX调用的API。基本上，它将在对该div或元素执行任何函数之前等待变量加载 将ng斗篷添加到您的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>

---

如果它是使用AJAX调用来的，您可以在调用过程中设置一个标志，并在成功时进行更新。

这里通常的建议是为加载状态添加一个变量。我觉得你根本不需要这个

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

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

以下是对模板的更改，以添加ng斗篷：

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

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

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

哪里定义了“无数据”？也许在一个加载TopContributors的函数中？你真的测试过这个吗？ng斗篷如何知道该变量实际已加载？如果它是通过一个承诺发生的，而这个承诺需要一点时间才能实现呢？我对ng斗篷的印象是，您将其用于其他目的，这取自angular文档：“用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示angular html模板。”ng-clope指令防止文档在加载AngularJS时显示未完成的AngularJS代码。AngularJS应用程序可以在加载应用程序时使HTML文档闪烁，在执行所有代码之前，先显示AngularJS代码一秒钟。使用ng-斗篷指令来防止这种情况。我了解了ng-斗篷的工作原理，它建议在加载/编译模板时防止闪烁，但是，OP没有与我们共享他的js代码，所以我们只需要假设他是如何加载TopContribors变量的。如果这是来自后端服务-这将是异步的-那么angular的ng斗篷将不会有效，因为最有可能的模板将加载和编译的方式之前，他的服务得到解决和他的变量得到更新。另外，你确定你需要CSS覆盖ng斗篷吗？这不是默认情况吗？没有ng斗篷可以与CSS配合使用。检查这个细节，还有你的论点，它不适用于异步调用，这是正确的，你可以设置一个标志。但是OP没有分享这一点，所以我不建议不必要地这样做。根据讨论更新了我的答案。

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

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